|
CSS - Image Border Padding Breaks In Ie
Hello.
Look at the differences between the borders around photos he http://www.fusionfox.com/2006/02/tinker_toys.html In Firefox and in IE. My CSS looks like this: .imageleft { float:left; margin:10px 10px 10px 0; background:#FFFFFF; padding:3px; border:1px dotted #999999; } Why does the image border disappear in IE? This is killing me. Any help would be greatly appreciated. Thanks! Similar TutorialsHi, I just was wondering if there is a way to load an image as background of a div with a 1px padding from the border of that same div. At the moment I have to create two divs. The first div has the border and a padding of 1px and the second div loads the image as background! However I was wondering whether I could do all this in one. Regards, Sim085 First off, I'm a new member. I'd like to thank everyone for such a great board. My name is Mike and I'll be a very active user in this community as I enter the world of web design. I have a page with an embedded flash object. I created a CSS Border around the object, and would like to add padding to it so that text can wrap around it. I understand that when adding padding to an object, it actually pushes the border out. I want the padding to reflect outside the border and not inside. All of my CSS has to be inline (the company's site does not allow workers to access template files via FTP). Here's what isn't working: <div style="padding-left:10px;padding-bottom:10px;"> <div style="border: 5px solid rgb(198, 175, 144); float: right;position:relative;right:12px;bottom:9px;"> *flash code* </div> </div> As you can see, I tried adding padding-left and padding-bottom outside the border but the text is still going underneath the object. Is there a better solution to this (using inline css)? Thanks to all. I'm having a real hard time trying to figure out how to fix this css issue. I'm trying to fix what's in the 3rd table content that is the compose new pm message form so that it doesn't have any space between the form and the outer content just like it is on the template that says Form with Alternative Style in the form heading. I can't fix the content class rule because that completely messes up the rest of the page and you can see that if you go back to one of the other two tabs. Template: http://www.kansasoutlawwrestling.com/peach/forms.html My Page JSfiddle: http://jsfiddle.net/MtzqR/ Hello, is it possible to start a border-left css 1 or 2 pixels from the left of the element instead of it going to the far left of the element?? I'm building a series of navigation links in boxes on top of each other. I want to pad the links inside their div tags 3 pixels all the way around. I'm seperating the boxes using the border property, 1px solid on the bottom of each cell. The top and the bottom are handled in a seperate class. In firefox, the brower adds the 3 pixels to the overall width (maybe six since I'm padding left/right) so the page comes out like this: --------- | Link 1 | ------------- | Link 2 | ------------- | Link 3 | ------------- Now in IE, it looks correctly. I'm not sure which one is correct, but since IE looks right I assume it's correct. Any way to get the padding to be handled consistently in 2 browsers? I've written a menu in css and I want to show the user what page they are on by having a little block of colour next to the link that they are on. This link should explain it better: http://www.midwivesonline.com/test.html at least it will do in everything but IE6 on windows where it stretches out too far to the right. The problem lies in the css: http://www.midwivesonline.com/styles/test.css In particular: .currentpagep { padding-right: 155px; border-right: 5px solid #85306B; } If I set the padding-right to just 5px then it's perfect in IE6 but screwed up everywhere else. From the tests I've done I don't think that it's a doctype issue - but then again not sure what the solution is... I'd really appreciate any help on this, Cheers, Tim Hi, I have a problem with the css for the following page: http://www.designdictator.com/ For the img in the log i do use the following css: #content img { display : block; border : 1px solid #999; padding : 4px; margin : 20px 0; } but in IE6 the padding between the border and the img doesn't display. Firefox does all right. What's wrong? thanx jarra I am designing a site which has a vertical nave which when an item in the list is hovered over it adds the left and right border and decreases the padding by 5 px: Code:
#navlist2 a
{
width: 168px;
/* extend the sensible area to the maximum with IE5 */
display: block;
text-align: left;
text-decoration: none;
color: #fff;
margin-top:5px;
margin-bottom: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
font-size: 12px;
font-weight: bold;
}
#navlist2 a:visited {
}
#navlist2 a:hover {
width: 163px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
padding-left: 5px;
}
It works fine in firefox, but I noticed that there is massive slowdown/lag . So im wondering, why this is happening in IE and how can I fix it? Hi guys, Ive been playing with this little bit of CSS for a while now and its' definitely getting the better of me. I have been using the demo on www.w3schools.com to create a horizontal menu. That has worked fine. I thought I could use a similar principle to create a horizontal menu. The whole idea is to create a CSS template, and then go through putting the ASP, etc in. I want to have a "leftpanel" on my site which will contain the navigation menu (that I am trying to create) and later make space for featured listings/whatever. Anyway, this is what I have: Code:
ul.ver
{
width: 125px;
padding: 0px;
margin: 0px;
text-align: center;
border: 1px solid black;
list-style-type: none;
float: left;
}
a.ver
{
float: left;
width: 125px;
text-decoration:none;
color: black;
padding: 0.2em 0.6em;
border: 1px solid black;
background-color: #A2B5CD;
}
div.leftpanel
{
background-color: #CAE1FF;
width: 125px;
float: left;
margin: 0px;
padding: 0px;
}
And the HTML is: Code: <div class="leftpanel"> <ul class="ver"> <li><a class="ver" href="#">MenuA</a></li> <li><a class="ver" href="#">MenuB</a></li> </ul> </div> The problem that I have is that no matter what the width of the <a> tags are, and what the width of the "leftpanel" is, there is always 20-ish pixel width strip of the "leftpanel" showing through, even though they are the same width, with no padding, no margins, no nothing! If I play with the padding on the <a> it seems to have no effect! Thanks to anyone who can offer me some help! Porky. Code on the page: Code: <body> <div class="wrapper_page"> <div class="wrapper_widebackground"> <div class="wrapper_body"> <div class="wrapper_head"><img src="Header.jpg" width="1000" height="182" /></div> <div class="wrapper_nav_top"><!-- navbar goes here --></div> <div class="wrapper_main"> <div class="wrapper_main_insidebackground_blue"> <div class="wrapper_main_insidebackground_white"> <div class="wrapper_main_top"><img src="PageBodyTop.png" width="1000" height="35" /></div> <div class="wrapper_main_content"> <div class="wrapper_main_sword"> <!-- Content here --> </div> </div> </div> </div> </div> </div> </div> </div> </body> Stylesheet: Code:
.wrapper_page {
text-align: center;
width: 100%;
border: 0px solid #FFFF00;
}
.wrapper_widebackground {
background-image: url(../Cloth.png);
width: 1350px;
background-repeat: no-repeat;
margin: auto;
clear: both;
border: 0px solid #FF0000;
}
.wrapper_body {
text-align: left;
margin: auto;
clear: both;
width: 1000px;
border: 0px solid #FF00FF;
padding: 0px;
}
.wrapper_head {
height: 182px;
width: 1000px;
border: 0px solid #33FF00;
margin: 0px;
padding: 0px;
}
.wrapper_nav_top {
height: 24px;
width: 1000px;
border: 0px solid #FFFF00;
margin: 0px;
padding: 0px;
}
.wrapper_main {
background-color: #000000;
background-image: url(../background.jpg);
margin: auto;
padding: 0px;
background-position: top;
background-repeat: repeat;
clear: both;
border: 0px solid #99FFFF;
}
.wrapper_main_insidebackground_blue {
background-repeat: no-repeat;
background-image: url(..Blue.jpg);
background-position: top;
background-color: #000000;
}
.wrapper_main_insidebackground_white {
background-repeat: repeat-y;
background-image: url(..White.png);
background-position: top;
}
.wrapper_main_top {
border: 0px solid #00FF00;
height: 35px;
width: 1000px;
margin: 0px;
padding: 0px;
clear: both;
}
.wrapper_main_sword {
background-image: url(../Sword.png);
background-repeat: no-repeat;
background-position: right top;
vertical-align: top;
padding: 0px;
margin-top: -14px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border: 0px solid #FF33CC;
}
.wrapper_main_content {
border: 0px solid #FF9900;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 90px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
Here's the issue. wrapper_main will not stretch all the way to the bottom of the page regardless of the amount of text. It maintains what seems to be a bottom margin whether I put a bottom margin of 0 there or not. (Currently, it is set to auto.) I thought maybe wrapper_body was causing the issue, but setting the padding to 0 on wrapper_body did not work. Here's the confusing part. If I set a border with a width of 1px on wrapper_main, it goes all the way to the bottom. However, the border looks bad on the page so I don't want the border. (I'd give you the URL, but the forums wouldn't allow it.) Why is this happening and how do I remedy it? I'm trying to renew my website using css. i have a list with images inside. something like <ul> <li><img ... /></li> <li><img .../></li> </ul> my style definition looks like img { margin:0px; padding:0px; } ul { margin:0px; padding:0px; } li { margin:0px; padding:0px; } i don't want any pixels between two items (images), but i cannot find the way to do that. i always get some pixels between them... anyone can help me? thanks! Hi all, I've got a <div> tag around an image and in Firefox, it shows an extra 2 pixels of padding at the bottom of the image - Why is that and how can it be stopped? There's no blank spaces between the <div> and <img... tags. For the life of me I cant find out what code that will align the image correctly. Currently the "previous" button on the page below has a gap on the left, and is being cropped on the right. http://zombiemod.com/rm/nina2/main.php?g2_itemId=13 This is the image im talking about: http://zombiemod.com/rm/nina2/theme...ntrols-left.png I guess if I remove the space to the left of the previous button, it will drag the image to the corrct position so all of the image is being displayed without having the right side cropped. Here is the HTML for the button: Code: <ul id="control-buttons"> <li><button id="controls-left"> <img src="themes/ajaxian/images/controls-left.png" alt="Left" /> </button></li> <li><button id="controls-play"> <img src="themes/ajaxian/images/controls-right.png" alt="Play" /> </button></li> <li><button id="controls-right"> <img src="themes/ajaxian/images/controls-right.png" alt="Right" /> </button></li> </ul> This is the code I used to try and set the correct height of the buttons: Code: #slideshow-controls button {
width: 44px;
height: 59px;
/*margin: 0;
padding: 0;*/
background-color: #000;
border: none;
text-align: center;
cursor: pointer;
}
IE is adding 8-10px of padding to the bottom of a div that I am placing a background-image in. It renders fine in ff, but because I am trying to match 3 parts of an image up to make one whole (I have reduced margin and padding to 0 on all 3 divs) there is this white gap between the divs?! Any ideas? I can not figure out how to remove the padding and margin around the triangle image so it is not indented, I would also like it if the gap between the image and the text was smaller. Can anyone suggest what I change or add to my code to do this. I am also wanting to know how I get the triangle to be part of the link, so clicking the triangle or thetext will open the sub menu. Code:
<!DOCTYPE HTML>
<html><head><title>working submenus</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
ul.catMenuItem { margin: 0px auto; list-style-type: none; /*margin-left: -25px;*/
background: url("triangle_right.png") no-repeat 0px 5px transparent; /*adjust 2px & 5px until it looks correct */
display: block;
padding: 0px 4px 0px 15px; /*adjust until you have enough left padding to account for your bullet */
/* list-style-image: url('triangle_right.png'); */
}
/* list-style-image:url('triangle_down.png'); */
ul.catMenuItem li a { text-decoration: none; padding: 0; margin: 0; }
ul.catMenuItem li.catSubMenu { display: none; padding-left: 30px; margin: 0; }
--></style>
<script type='text/javascript'><!--
var prevCat;
function menu(newCat) {
if (prevCat) prevCat.style.display = 'none';
newCat.style.display = 'block';
prevCat = newCat;
}
onload = function() {
var menus = document.getElementsByTagName('ul');
for (var a=0,x=menus.length; a<x; a++) {
if (menus[a].className === 'catMenuItem') {
menus[a].getElementsByTagName('li')[0].getElementsByTagName('a')[0].onclick = function() {
menu(this.parentNode.parentNode.getElementsByTagName('li')[1]);
}
menus[a].getElementsByTagName('li')[1].style.display = 'none';
}
}
}
--></script>
</head><body>
<ul class="catMenuItem">
<li class="catMenuTitle"><a href="#">Menu 1</a></li>
<li class="catSubMenu">
Content 1.1<br>
Content 1.2<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li class="catMenuTitle"><a href="#">Menu 2</a></li>
<li class="catSubMenu">
Content 2.1<br>
Content 2.2<br>
<br>
</li>
</ul>
<ul class="catMenuItem">
<li class="catMenuTitle"><a href="#">Menu 3</a></li>
<li class="catSubMenu">
Content 3.1<br>
Content 3.2<br>
<br>
</li>
</ul>
</body></html>
I want white background and a image on 2 sides of this i thought of just added border but can't seem to find out how to get 2 image on the border. Any help would be great. I'm trying to use images for my border, but for some reason it isn't working. Here is my code: Code:
/* This is the border line & background colour round the entire page */
.bodyline {
border-top-image: url(images/top.gif);
border-top-right-image: url(images/topRight.gif);
border-right-image: url(images/right.gif);
border-bottom-right-image: url(images/bottomRight.gif);
border-bottom-image: url(images/bottom.gif);
border-bottom-left-image: url(images/bottomLeft.gif);
border-left-image: url(images/left.gif);
border-top-left-image: url(images/topLeft.gif);
}
The path to the images is right, so that's definitely not the problem. Can someone help me out? I am having a rather annoying problem with Internet Explorer 6 not putting the proper padding between the CSS border and the image. You can see the problem he http://www.sdstyle.org/article.php?id=101 Basically, there ought to be a six pixel white border and then a one pixel gray border around the images and the breakout in the middle of the page. The offending code is: Code:
.article_image {padding: 6px; border:1px; border-style:solid; border-color:#ccc; margin-bottom:8px;}
...and for the image:
<img src='images/articles/101_image_1.jpg' class='article_image'>
This works fine in Gecko (Mozilla and Firebird) and on Mac IE. I've read there is a bug in IE's handling of CSS (shocking...), am I running into that problem? I tried doing a search here and on Google, and for some reason all of the other solutions I've tried didn't work. Thanks in advance! Hey, I have a small Problem with my Border Div. It doesn't get the height from the content-content div. Html: div Code: Original - div Code <div id="content"> <div class="content-border content-border-left"></div> <div id="content-content"> <div id="maincontent"> ###MAIN_CONTENT### </div> <div id="statecontent"> ###STATIC_CONTENT### </div> </div> <div class="content-border content-border-right"></div> </div> <div ID="content"> The both border div should get the height from the content-content. But every time he just uses the min-height. If I write height: 100% on the border div, he will use every time a height higher then the content-content. What should I do? CSS: css Code: Original - css Code #content { margin: 0px auto; width: 800px; text-align: left; font-family:Verdana; font-size: 11.5px; } .content-border { float:left; width: 2px; height: inherit; min-height: 300px; background-repeat: repeat-y; } .content-border-left { background-image: url("../images/border_left.png"); } .content-border-right { background-image: url("../images/border_right.png"); } #content-content { float:left; width: 796px; height: inherit; background-color: #D8DEE2; } #maincontent { float: left; height: inherit; width: 531px; } #statecontent { float: left; height: inherit; width: 264px; }
I use a border-image which has a width of 2px. Thank you in advance for your help. Loki1991 I want to use an image as a border using xhtml and css. The border goes around the bottom and the right of an area on my page that has a fixed with an a variable height. As Image borders won't be implemented in css until css3, I attempted to do it using layers of spans with background images along the sides. It resulted in a page that renders incorrectly and differently in the three browsers i tested it in (firefox,ie,opera). Visual Examples: (attached) theoretically.png -> What it should look like at this point ie.png -> how ie renders it ffx.png -> how firefox renders it opera.png -> how opera renders it. Here is the code so far: xhtml: Code: <div class="PageBody">
<span class="PageBody_RightBgLayer">
<span class="PageBody_BottomBgLayer">
<span class="PageBody_RightBottomCornLayer">
<span class="PageBody_FinalLayer">
hello
<br />test
<br />test2
</span>
</span>
</span>
</span>
</div>
css: Code:
.PageBody
{
position:absolute;
left:0px;
top:110px;
background-color: #ffffff;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_Corner
{
position:absolute;
right:0px;
bottom:0px;
}
.PageBody_Right
{
position:absolute;
right:0px;
top:0px;
}
.PageBody_RightBgLayer
{
background-image: url("../Images/PageBody/right.gif");
background-position: right;
background-repeat: repeat-y;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_BottomBgLayer
{
background-image: url("../Images/PageBody/bottom.gif");
background-position: bottom;
background-repeat: repeat-x;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_RightBottomCornLayer
{
background-image: url("../Images/PageBody/corner.gif");
background-position:right bottom;
background-repeat:no-repeat;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.PageBody_FinalLayer
{
margin: 0px 13px 12px 0px;
width:600px;
min-height:300px;
}
Is there any way to fix this or am I going about it wrong? Thank you, Benjamin Prosnitz |
|||||||