PDA

View Full Version : IE problem with background

chadi
September 10th, 2007, 02:32 AM
Another strange IE issue.

The right bar "sub-navigation" is showing up white background in Firefox as it should show up (entire column). However, it is showing up in this color c3dcf1, in IE.

The 2ndlevel style sheet:


#content-container {
margin-top:10px;
#background-image:url(../images/bgd_2ndlevel_body.gif);
width:798px;
border-bottom:18px solid white;
}

#content {
width:568px;
}

#sub-navigation {
float:right;
width:214px;
background-color:#fff;
}

#sub-navigation h2 {
display:none;
background-color:#fff;
}

ul#second-lvl-nav {
text-align: left;
list-style-type:none;
margin:0px;
padding:0px;
width:214px;
background-color:#fff;
}

ul#second-lvl-nav li {
margin:0px;
padding:0px;
border-bottom:1px solid #b4d2ec;
font-size:11px;
background-color:#fff;
}

ul#second-lvl-nav li a
{
display: block;
padding: 6px;
width:214px;
voice-family: "\"}\"";
voice-family:inherit;
width:202px;
color:#5a7285;
text-decoration: none;
background-color:#fff;
}

ul#second-lvl-nav li a:hover, ul#second-lvl-nav li#active a:hover
{
color: #5a7285;
background: #dbeefe;
}


I'm fairly new to all the css stuff so bear with me.

html code...

<div id="sub-navigation">
<ul id="second-lvl-nav">
<li><a href="clientexec.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
ClientExec Billing Software</a></li>
<li><a href="controlpanels.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Control Panel Tour</a></li>
<li><a href="roundcube.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Webmail Demo</a></li>
<li><a href="designer.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Website Creator Demo</a></li>
<li><a href="compare.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/> Compare Hosting Types</a></li>
</ul>
</div>

Attached, you'll see how it is in firefox and ie (bluish background). It should be white in IE7 without left solid border (except below <li> links) as it is in firefox.


http://img475.imageshack.us/img475/2083/screenshot002lq3.th.jpg (http://img475.imageshack.us/my.php?image=screenshot002lq3.jpg)
http://img475.imageshack.us/img475/2117/screenshot003vy1.th.png (http://img475.imageshack.us/my.php?image=screenshot003vy1.png)
Buzz
September 10th, 2007, 03:28 AM
You've obviously not provided enough code. If #c3dcf1 is showing up.. it's not used ANYWHERE in the CSS you provided. So there's no way to know where it may be coming from. It's certainly not being created miraculously by the browser. In this case.. a link would also be preferable to posted code.
chadi
September 10th, 2007, 03:37 AM
I cannot post the clients website link as his request/privacy (it is not live yet).

Anyway, it sure isn't miraculous but why does firefox render it white correctly when IE does not? Is firefox performing a miracle?
Buzz
September 10th, 2007, 03:41 AM
It's impossible to say without knowing where the color is coming from.

Firefox renders CSS pages better than IE ever will, plain and simple. Also, if there are problems in IE7 you can rest assured there are at least 20 more in IE6. If you're building a CSS site you need to test in both IE6 and IE7 and write appropriate CSS for both those browsers as well.
chadi
September 11th, 2007, 01:21 AM
I'm new to CSS. I've learned fast so far, but still learning.

I have pasted all 3 css sheets in pastebin for you to see.

In my <head> area I have this also


<style type="text/css">
<!--
@import url("../styles/site.css");
@import url("../styles/2ndlevel.css");
@import url("../styles/style.css");
body { behavior: url(../scripts/csshover2.htc); }
#menuItemServices { background-image:url(../images/navigation/on_services.gif); }
-->
</style>
<!--[if IE]>
<style type="text/css">
button { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; }
</style>
<![endif]-->
<script type="text/javascript" src="../scripts/primarynav.js"></script>
</head>


The crazy part is, now firefox is showing the entire column in C3DCF1 color and I have NO idea why/how. I'm so lost and confused. Your help is appreciated.



2ndlevel.css
http://pastebin.com/m15b505f8

style.css
http://pastebin.com/m6c4390ef

site.css
http://pastebin.com/m555c3c95


This is the body portion of that right side column



<div id="sub-navigation">
<ul id="second-lvl-nav">
<li><a href="shared.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/> Shared Hosting Plans</a></li>
<li><a href="reseller.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/> Reseller Hosting Plans</a></li>
<li><a href="vps/vps.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/> Virtual Private Servers</a></li>
<li><a href="dedicated.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/> Linux / Windows Dedicated Servers</a></li>
<li><a href="compare.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/> Compare Hosting Types</a></li>
<li><a href="services.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/> Additional Services</a></li>
</ul>

</div>
Buzz
September 11th, 2007, 01:56 AM
Okay, that was helpful here.

I note you've got the background color #c3dcf1 applied to the entire body. Then a white background (#fff) applied to the sub-navigation div Then #c3dcf1 applied to the anchors in the subnav div.

Your subnav div is set to float... that means it has no height. IE reads this and shows the background of the body because the column has no height. You need the subnav column to extend the length of the page.

Try adding this...

</ul>
<div style="clear:both;"></div>
</div>


Note it's before the closing subnav div and after the closing </ul> for the sub navigation.

Beyond this you may need to restructure the entire page to get the column to work correctly. Since you are using tables, you could simply apply a white background to that column cell.

(random CSS tip... if the value of something is 0 you do not need px after it. 0 is 0 regardless of any measurement. 0px = 0em = 0pt = etc. So just 0 is fine.)
chadi
September 11th, 2007, 03:09 AM
Thanks for the help.

Unfortunately it did not work.

Maybe you can figure it out if I'm even more clear of what I'm trying to do.

The <li> (which is the menu part) should keep the bluish background (and its hover different color). The REST of the column should be strictly white, everything below the last <li> list.

Right now, I'm baffled. Firefox is showing the whole thing blue when yesterday it wasn't, and I have no idea how it happened and how to reverse that. IE is still doing the same as it was.

I put it this way....

</ul>

<div style="clear:both;"></div>

<table style="width: 100%">
.....(rest of table code)

</div>

That did not work, neither did placing it right before that last </div> portion.

Please help me figure this out once an for all. Its tricky, but you seem to know the css field.

The 2ndlevel.css is still this:

http://pastebin.com/m7d203bc2

html

<div id="sub-navigation">
<ul id="second-lvl-nav">
<li><a href="clientexec.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
ClientExec Billing Software</a></li>
<li><a href="controlpanels.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Control Panel Tour</a></li>
<li><a href="roundcube.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Webmail Demo</a></li>
<li><a href="designer.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Website Creator Demo</a></li>
<li><a href="compare.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Compare Hosting Types</a></li>
</ul>

<div style="clear:both;"></div>

<table style="width: 100%">
<tr>
<td class="style1" valign="top">
&nbsp;</td>
</tr>

<tr>
<td class="style1" valign="top">
<a href="../whyus/guarantee.php">
<img alt="30 Day Money Back Guarantee" src="../images/seal.gif" width="120" height="120" class="style2"/></a></td>
</tr>

<tr>
<td style="height: 215px" valign="top">
<img alt="Reseller Special" src="../images/reseller-special.gif" width="205" height="214" /></td>
</tr>

<tr>
<td>&nbsp;</td> </tr>

<tr>
<td>
<table style="width: 100%">
<tr>
<td class="style77">
<img alt="24/7 Support" src="../images/support-tab.gif" width="180" height="50"/></td>
</tr>
<tr>
<td class="style77">
<img alt="99.99% Uptime SLA" src="../images/network-tab.gif" width="180" height="50"/>&nbsp;</td>

</tr>
<tr>
<td>
<img alt="Testimonials" src="../images/testimonials-tab.gif" width="180" height="50"/>&nbsp;</td>
</tr>
</table>


</td>
</tr>
<tr>
<td>&nbsp;</td> </tr>
</table>

<table style="width: 100%; height: 82px">
<tr>
<td class="style5"><strong>Upgrade Options</strong></td>
<td class="style4">&nbsp;</td>
</tr>
<tr>
<td class="style10">Static IP Address</td>
<td class="style10">$2/mo</td>
</tr>
<tr>
<td class="style10">Bandwidth 1GB</td>
<td class="style10">$1/mo</td>
</tr>
<tr>
<td class="style10">RapidSSL Certificate</td>
<td class="style10">$49/yr</td>
</tr>
<tr>
<td class="style10">Site Galore Creator</td>
<td class="style10"><a href="designer.php">info</a></td>
</tr>
<tr>
<td class="style10">cPanel XP Evolution</td>
<td class="style10">$5/mo</td>
</tr>
</table>

</div>
Buzz
September 11th, 2007, 03:53 AM
You've got a real mix of tables and CSS. Using CSS for positioning and then using tables for positioning will almost always result in issues.

Because of your already heavy use of tables why not just throw the entire page into a table?


<table>
<tr>
<td colspan="3"
Header row
</td>
</tr>
<tr>
<td>
Right column
</td>
<td>
Center column
</td>
<td>
right column
</td>
</tr>
</table>


or you could try this to see if what you have may adjust:


<div id="sub-navigation">
<ul id="second-lvl-nav">
<li><a href="clientexec.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
ClientExec Billing Software</a></li>
<li><a href="controlpanels.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Control Panel Tour</a></li>
<li><a href="roundcube.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Webmail Demo</a></li>
<li><a href="designer.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Website Creator Demo</a></li>
<li><a href="compare.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Compare Hosting Types</a></li>
</ul>

<table style="width: 100%">
<tr>
<td class="style1" valign="top">
&nbsp;</td>
</tr>

<tr>
<td class="style1" valign="top">
<a href="../whyus/guarantee.php">
<img alt="30 Day Money Back Guarantee" src="../images/seal.gif" width="120" height="120" class="style2"/></a></td>
</tr>

<tr>
<td style="height: 215px" valign="top">
<img alt="Reseller Special" src="../images/reseller-special.gif" width="205" height="214" /></td>
</tr>

<tr>
<td>&nbsp;</td> </tr>

<tr>
<td>
<table style="width: 100%">
<tr>
<td class="style77">
<img alt="24/7 Support" src="../images/support-tab.gif" width="180" height="50"/></td>
</tr>
<tr>
<td class="style77">
<img alt="99.99% Uptime SLA" src="../images/network-tab.gif" width="180" height="50"/>&nbsp;</td>

</tr>
<tr>
<td>
<img alt="Testimonials" src="../images/testimonials-tab.gif" width="180" height="50"/>&nbsp;</td>
</tr>
</table>


</td>
</tr>
<tr>
<td>&nbsp;</td> </tr>
</table>

<table style="width: 100%; height: 82px">
<tr>
<td class="style5"><strong>Upgrade Options</strong></td>
<td class="style4">&nbsp;</td>
</tr>
<tr>
<td class="style10">Static IP Address</td>
<td class="style10">$2/mo</td>
</tr>
<tr>
<td class="style10">Bandwidth 1GB</td>
<td class="style10">$1/mo</td>
</tr>
<tr>
<td class="style10">RapidSSL Certificate</td>
<td class="style10">$49/yr</td>
</tr>
<tr>
<td class="style10">Site Galore Creator</td>
<td class="style10"><a href="designer.php">info</a></td>
</tr>
<tr>
<td class="style10">cPanel XP Evolution</td>
<td class="style10">$5/mo</td>
</tr>
</table>

<div style="clear: both;"></div>

</div>


Basically.. if you are going to use CSS for positioning, do it inside tables, if you are using tables. Or don't use tables for positioning. CSS positioning + Table positioning is always a mess.
chadi
September 11th, 2007, 04:00 AM
That html code you told me to try, I already pasted the same thing before and mentioned that it did not work.

I use tables because I have no idea how to use columns/rows using css strictly.

Could you give a little example?

As you see, I have tables with rows, some columns. How can one achieve this using css strictly and being tableless?
Buzz
September 11th, 2007, 04:21 AM
The html code above is different than before. I moved the <div style="clear: both;"></div> line to below the tables. I wasn't aware there were tables there before. The important thing is that that line appears before the closing div tag for the sub nav column.

Here's some straight CSS code.. it's untested but theoretically should work.


<div id="sub-navigation">

<ul id="second-lvl-nav">
<li><a href="clientexec.php"><img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2" /> ClientExec Billing Software</a></li>

<li><a href="controlpanels.php"><img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2" /> Control Panel Tour</a></li>

<li><a href="roundcube.php"><img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2" /> Webmail Demo</a></li>

<li><a href="designer.php"><img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2" /> Website Creator Demo</a></li>

<li><a href="compare.php"><img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2" /> Compare Hosting Types</a></li>
</ul>


<div class="style1" >
<a href="../whyus/guarantee.php"><img alt="30 Day Money Back Guarantee" src="../images/seal.gif" width="120" height="120" class="style2" /></a>

<br />

<img alt="Reseller Special" src="../images/reseller-special.gif" width="205" height="214" />

</div>

<div class="style77">
<img alt="24/7 Support" src="../images/support-tab.gif" width="180" height="50" />
<br />
<img alt="99.99% Uptime SLA" src="../images/network-tab.gif" width="180" height="50" />
<br />
<img alt="Testimonials" src="../images/testimonials-tab.gif" width="180" height="50" />
</div>

<div class="style5">
<span class="style4" style="float: right;">&nbsp;</span>
<strong>Upgrade Options</strong>
</div>

<div class="style10">
<span style="float: right;">$2/mo</span>
Static IP Address
</div>

<div class="style10">
<span style="float: right;">$1/mo</span>
Bandwidth 1GB
</div>

<div class="style10">
<span style="float: right;">$49/yr</span>
RapidSSL Certificate
</div>

<div class="style10">
<span style="float: right;"><a href="designer.php">info</a></span>
Site Galore Creator
</div>

<div class="style10">
<span style="float: right;">$5/mo</span>
cPanel XP Evolution
</div>

<div style="clear: both;"></div>

</div>



Make certain you have a space before every /> for image tags. Without the space it won't be read properly.

Some of this is just guessing based on what I've done in the past. Without a real page to test I can't guarantee it will work 100% perfect first time. I also didn't check the current styles you've got assigned. It may need some minor tweaking still.