Forum Moderators: not2easy
I don't have lot of experince with CSS but am learning more now, I changed a graphics menu on my site to one using CSS instead , I used some auto generated code from a webmaster website that helps you general the needed CSS.
The menu is suppose to be 150 pixels wide placed right under a 150 pixel wide graphic, this looks fine in IE, however in Mozilla the menu is coming out 5-10 pixels to large (compared the to 150 pixel image right about it.)
Here is the CSS code
.buttonscontainer {width: 150px;}.buttons a {color: #000000;
border: 1px solid;
background-color: #CCCCFF;
padding: 2px;
padding-left: 4px;
font: 10px Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
border-color: #CCCCFF #330066 #330066 #330066;
display: block;
margin: 0px;
width: 100%;
text-align: left;}
.buttons a:hover {border: 1px solid;
padding-left: 4px;
padding-top: 3px;
padding-bottom: 1px;
padding-right: 1px;
background-color: #ffff99;
font-weight: bold;
border-color: #330066 #CCCCFF #CCCCFF #330066;
color: #000000;
text-decoration: none;}
Here is a sample of the html code
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<IMAGE 150 pixels wide>
</td>
</tr>
<tr>
<td width="150" bgcolor="#FFFFFF"><div class="buttonscontainer">
<div class="buttons">
<a href="url">My Menu Link</a>
</div>
</div>
If the made the table border=1 it looks fine, the CSS is over lapping the top of the table.
Any ideas on how I can make this look right on both sides? Am I messing it up by trying to use CSS inside of the table? I would appriciate any ideas or pointers!
thanx!
-Marie
-marie
In general, you're best advised to design for FireFox/Mozilla/Gecko-based browsers, then tweak for IE (and Opera, which also has some "oddball" behavioral situations). If it's broken, 9 times out of 10 it's only broken in IE, not in the rest of 'em....
The reason is TIED to that 100%, but not that setting alone. I think the problem you're having may be with IE's rendering of the box model.
In compliant browsers (mozilla, firefox, opera) thw calculated width of a box is it's explicit width + margins + padding + borders. So a 150px wide box with 5px margin and 5px padding on either side is ACTUALLY 170px wide in the layout, see?
Using this formula on your code, we see that the width is 150px (or 100% of the containers 150px) + 4px padding on one side + 2px padding on the other side + 1px of border on each side = 158px. Which is probably what Mozilla, et al are showing you.
IE (version 5.5 and lower, and version 6 in Quirks mode), render the box model wrong. They take the explicit width value, then pack all the margins, padding and borders INSIDE of it, shrinking the content area to make room for the extra space. So in IE (unless it's IE6 in Standards Mode or IE5.5 for Mac), the same box from your code is 150px wide.
If this is the problem, the one getting it wrong hereis IE, although I've heard it convincingly argued that IE's way is more intuitive (although still wrong).
Anyway, the fix is to feed complianr browsers one value and IE another, so that they both get it right on your page. The easiest way to do this is to set width to the value for Moz, etc (in this case change it to 142px), then use one of a hundred different hacks to get it right in IE. My favorite is the star hack, which feeds rules only to IE browsers...
* html .buttons a {
width: 150px;
w\idth: 148px;
}
This gives IE browsers the width of 150px, then gives IE6 back the compliant value (since as long as you use a valid DOCTYPE and valid code, IE6 stays in Standards Mode) with the second line.
If you try all this and it doesn't work, the good news is your problem is not with the box model. The bad news is, you're back to square one.
Ain't CSS grand? :)
thanx!
-Marie
