...

View Full Version : CSS in IE vs FireFox issue.



ellisgl
05-21-2005, 02:15 AM
Ok.. Now I'm having an issue with the CSS with IE. Firefox works fine.
http://www.geeklab.net/images/ie-css-firefox.jpg

Notice how the FireFox screen shot has a border around the table and IE doesn't? Well I want IE to show it up like FireFox.

Here's the code that I'm using (css and html):
CSS:

a.mainlevel:link, a.mainlevel:visited {
/*background: url(menu_bg.png) no-repeat;*/
/*background:#eaeaea;*/
vertical-align: left;
font-size: 10px;
font-weight: bold;
color: #888888;
text-align: left;
/*padding-top: 0px;*/
padding-left: 1px;
/*height: 20px !important;*/
/*height: 25px;*/
width: 100%;
text-decoration: none;
}

table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 1px;
border-spacing: 0px;
border-collapse: separate;
cellspace: 1px;
background: black;
}

table.moduletable th {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
/*background: url(../images/subhead_bg.png) repeat-x;*/
background: #7F5D00;
color: #FFBA00;
text-align: right;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;

}

table.moduletable td {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 0px;
margin: 0px;
font-weight: normal;
background:#eaeaea;
}


Table layout:

<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">
Main Menu
</th>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="index.php?option=com_frontpage&amp;Itemid=1" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&amp;task=section&amp;id=1&amp;Itemid=2" class="mainlevel" >News</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&amp;task=blogsection&amp;id=0&amp;Itemid=9" class="mainlevel" >Blog</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_weblinks&amp;Itemid=23" class="mainlevel" >Links</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_contact&amp;Itemid=3" class="mainlevel" >Contact Us</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_search&amp;Itemid=5" class="mainlevel" >Search</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&amp;task=category&amp;sectionid=3&amp;id=7&amp;Itemid=25" class="mainlevel" >FAQ's</a></td></tr>
</table>
</td>
</tr>
</table>

So what's my problem?

_Aerospace_Eng_
05-21-2005, 03:51 AM
Its the way IE renders padding, that black border you saw in FF, was just the background color of the table showing through, I say just make a border in CSS, use this for your CSS, I have taken out the items you had commented, and items that didnt make a difference if they were there or now. You had vertical-align:left. Thats not even valid how would it be? Vertical is up and down, left is well sideways.

a.mainlevel:link, a.mainlevel:visited {
font-size: 10px;
font-weight: bold;
color: #888888;
padding: 1px;
text-decoration: none;
}

table.moduletable {
width: 100%;
margin-bottom: 5px;
border:1px solid #000000;
background: #000000;
}

table.moduletable th {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background: #7F5D00;
color: #FFBA00;
text-align: right;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

table.moduletable td {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
background:#eaeaea;
}

ellisgl
05-21-2005, 04:44 AM
figured it out..
here's the new css
table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: separate;
border: 1px solid black;
cellspace: 1px;
background: black;
}

ellisgl
05-21-2005, 04:46 AM
Its the way IE renders padding, that black border you saw in FF, was just the background color of the table showing through, I say just make a border in CSS, use this for your CSS, I have taken out the items you had commented, and items that didnt make a difference if they were there or now. You had vertical-align:left. Thats not even valid how would it be? Vertical is up and down, left is well sideways.

a.mainlevel:link, a.mainlevel:visited {
font-size: 10px;
font-weight: bold;
color: #888888;
padding: 1px;
text-decoration: none;
}

table.moduletable {
width: 100%;
margin-bottom: 5px;
border:1px solid #000000;
background: #000000;
}

table.moduletable th {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background: #7F5D00;
color: #FFBA00;
text-align: right;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

table.moduletable td {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
background:#eaeaea;
}

Thanks that helps too!
Now to figure out the issue with Mambo and how to change how the front side looks with posts on the front page..

http://ellisgl.mine.nu/mambo/
I'm trying to convert an old theme over. So the new stuff is on top of the old stuff for reference.

_Aerospace_Eng_
05-21-2005, 05:06 AM
fyi, cellspace isn't valid css, to get cellspace you can use border-spacing, which isn't supported by MSIE, and border-collapse which is supported by MSIE.
You can check the specs.
http://www.w3.org/TR/CSS2/

ellisgl
05-21-2005, 04:41 PM
I used your code since it looked a lot smaller and well it works .. =P
thanks a ton man!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum