Go Back   Cyber Tech Help Support Forums > Software > Web Development & Graphic Design
Reload this Page IE problem with background
Register FAQ Calendar Search Today's Active Topics Mark Forums Read

Notices

Web Development & Graphic Design Problem Solving for Graphic Design, PHP, ASP, Perl, MySQL, SQL, XML, HTML issues

Reply
 
Topic Tools
  #1  
Old September 10th, 2007, 02:32 AM
chadi chadi is offline
Senior Member
  
Join Date: Feb 2004
Posts: 157
IE problem with background
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:

Code:
#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...
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.



Reply With Quote
  #2  
Old September 10th, 2007, 03:28 AM
Buzz Buzz is offline
Cyber Tech Help Moderator
  
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
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.
Reply With Quote
  #3  
Old September 10th, 2007, 03:37 AM
chadi chadi is offline
Senior Member
  
Join Date: Feb 2004
Posts: 157
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?
Reply With Quote
  #4  
Old September 10th, 2007, 03:41 AM
Buzz Buzz is offline
Cyber Tech Help Moderator
  
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
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.
Reply With Quote
  #5  
Old September 11th, 2007, 01:21 AM
chadi chadi is offline
Senior Member
  
Join Date: Feb 2004
Posts: 157
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

Code:
<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

Code:
<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>
Reply With Quote
  #6  
Old September 11th, 2007, 01:56 AM
Buzz Buzz is offline
Cyber Tech Help Moderator
  
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
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...
Code:
</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.)
Reply With Quote
  #7  
Old September 11th, 2007, 03:09 AM
chadi chadi is offline
Senior Member
  
Join Date: Feb 2004
Posts: 157
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

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 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>
Reply With Quote
  #8  
Old September 11th, 2007, 03:53 AM
Buzz Buzz is offline
Cyber Tech Help Moderator
  
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
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?

Code:
<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:

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>

<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.
Reply With Quote
  #9  
Old September 11th, 2007, 04:00 AM
chadi chadi is offline
Senior Member
  
Join Date: Feb 2004
Posts: 157
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?
Reply With Quote
  #10  
Old September 11th, 2007, 04:21 AM
Buzz Buzz is offline
Cyber Tech Help Moderator
  
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
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.

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 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.
Reply With Quote
Reply

Bookmarks

« Previous Topic | Next Topic »
Topic Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Topics
Topic Topic Starter Forum Replies Last Post
Desktop Background problem Atticus_Finch Windows XP 7 April 3rd, 2007 07:35 PM
problem with my background horlickiki Windows XP 2 September 23rd, 2006 07:08 AM
Background problem Lynn930 Windows XP 2 September 13th, 2006 02:34 AM
HTL & background of problem HELP! debbiw Malware Removal 4 June 8th, 2005 03:30 AM
background problem aaron j b Windows XP 1 March 24th, 2005 12:11 PM


All times are GMT +1. The time now is 06:16 AM.