IE Only CSS gremlin, divs displaying too low and images stacking Options

[Fouroh4]

Hi, this is hurting my head...

Two Source Pages:

HTML-> http://gndc.runhost.net/theanchor/3.box.challenge.html
CSS -> htt://gndc.runhost.net/theanchor/3.box.css

The Problems:

1. The 2 side divs are showing too low. They are about 7 pixels off, whenever i change the code to fix this in IE/win/OSX I lose the layout in Firefox, Opera and Safari.

2. In IE/OSX the background of the middle div isn't showing

3. The Images in the right div are stacking ontop of the 1st image, this is really weird.

The Code:
CSS Syntax for Both Boxes:

CODE

#topper {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    border: 0px;
    width: 100%;
    height: 135px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    height: 135px;
    background-color:transparent;
    background-image:url(../images/top.bg.new.gif);
    background-repeat: no-repeat;
    z-index: auto;
    }
    
* html>body #topper {
    height: 135px; /* ie5win fudge ends */
    background-position:135px 0;
    background-image:url(../images/top.bg.new.gif);
    }
    
#left {
    position: absolute;
    top: 162px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    border-bottom: 10px solid #000000;
    background: url(../images/nav.bg.gif);
    width: 151px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 151px;
    vertical-align: top;
    }
    
* html>body #left {
    top: 140px;
    width: 151px; /* ie5win fudge ends */
    }

#right1 {
    position: absolute;
    top: 174px;
    right: 0px; /* Opera5.02 will show a space  at right when there is no scroll bar */
    margin: 0px;
    padding: 0px;
    background: url(../images/right.nav.bg.gif);
    width: 161px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    vertical-align:top;
    width: 161px;
    }
    
* html>body #right {
    width: 161px; /* ie5win fudge ends */
    }

HTML for Both Boxes & topper:

CODE

<div id="topper">

    <img src="images/top.left.gif" width="307" height="143" align="left" alt=""/>
    <img src="images/community.names.gif" width="102" height="143" align="right" alt=""/>
    
</div>
<div id="left">

    <img src="images/this.issue.gif" alt="This Issue" width="151" height="31"/><br/>
            Page 2 & 3 - News<br/>
        Page 7 - Jerrys Journal<br/>
        Page 11 - <span class="style3">Chestermere Town Hall</span>
      
      <p><img src="images/other.sections.gif" alt="Other Sections" width="151" height="19"/><br/>
          Places of Worship<br/>
        Business Profile<br/>
        Horoscopes<br/>
        Gallery</p>
        
    <p><img src="images/anchor.poll.gif" width="151" height="19" alt="The Anchor Poll"/><br/>
          Where do you drink your coffee?</p>
              <p align="center">
                Tim Hortons<br/>
                Starbucks<br/>
                Second Cup<br/>
                   At Home<br/>
                   Waaaay too cool for coffee!</p>
                
  <p align="left"><img src="images/usefull.links.gif" alt="Useful Links" width="151" height="19"/><br/>
      - Calgary Airport<br/>
    - Alberta Lotteries<br/>
    - Calgary Flames<br/>
    - Road Cameras<br/>
    + Add New</p>

</div>
<div id="right1">
<img src="images/weather.gif" alt=""/>
    <p> <img src="images/ad.spaceholder.gif" alt="ad space holder" width="142" height="167" align="right"/><br /><br /></p>
    <p> <img src="images/ad.spaceholder.gif" alt="ad space holder" width="142" height="167" align="right"/><br /><br /></p>
    <p> <img src="images/ad.spaceholder.gif" alt="ad space holder" width="142" height="167" align="right"/><br /><br /></p>
</div>

I am almost at the point where I'm just going to create two versions of the page one for the good browsers and one for IE which seems RIDICULOUS but inevetible and send the user to the appropriate one with a browser detection script.

Any Ideas?

404

[Darin McGrew]

CSS -> htt://gndc.runhost.net/theanchor/3.box.css

You've got CSS errors. For starters, CSS comments look
/* like this */
and not
// like this

1. The 2 side divs are showing too low. They are about 7 pixels off, whenever i change the code to fix this in IE/win/OSX I lose the layout in Firefox, Opera and Safari.

Can you show us what you tried?

2. In IE/OSX the background of the middle div isn't showing

Are you really concerned about the presentation in MSIE/Mac? I'm happy if the content is accessible in such obsolete browsers.

3. The Images in the right div are stacking ontop of the 1st image, this is really weird.

I don't see this consistently across browsers, but I think it is caused by browser interpreting the align="right" (in HTML) as float: right in CSS. That removes the images from the flow of content in your paragraphs, and they stack one under the other.

But floating images shouldn't overlap like that either. Maybe fixing the errors will help.

I am almost at the point where I'm just going to create two versions of the page one for the good browsers and one for IE which seems RIDICULOUS but inevetible and send the user to the appropriate one with a browser detection script.

You do realize that browsers lie about which browser they are, don't you?

BTW, don't use px for font sizes. Use 100% for body text, use larger percentages for headings and the like, and use (slightly) smaller percentages for legalese and similar fine print.

[Fouroh4]

Darin,

Thanks for the reply and the answers. i was able to create two css templates for the big problems that Ive been experiencing.

Concerning the side bars being two low, reducing the height from the top of the page lined them up, but the values were different in IE than in FF/Mozilla browsers. I used a separate CSS sheet for this fix and had to concede to the DHTML browser detection script. IE height: 162px, Mozilla height: 174px. Where did the 12 pixels come from?

You were right about the images on the right stacking because of the float misinterpretation. I fixed that by changing the background image slightly and giving them a center align property, that fixed it through all platforms.

I am going to solve this problem with CSS and get rid of the detection script but as deadlines are looming, this is a stop gap measure. Also thanks for pointing out the comment thing, god im lazy.

[pandy]

In IE/OSX

Is that IE5 Mac?

[Fouroh4]

In IE/OSX

Is that IE5 Mac?

10-4 Rubber Ducky

[Darin McGrew]

Where did the 12 pixels come from?

You've left a lot of padding and margins unspecified. Different browsers have different defaults. If you're going to worry about pixels like this, then you must specify everything. A quick and dirty approach is to add

CODE

* {margin: 0; padding: 0}

to your style sheet.

Also, FWIW, during debugging it helps to change background colors for everything. Changing borders can help, but it can also get confusing because borders affect margins and the way adjacent margins collapse. But I also like the way Opera and Firefox's developer toolbar allow me to turn on borders for debugging.

BTW, have you seen what happens to your site when the browser window isn't maximized? Or when a larger minimum font size is enforced?

The big picture is that no one but you is going to look at your site in multiple side-by-side browsers. And no one but you is going to care about every pixel. As long as it looks okay and is usable in the visitor's browsing environment, he'll be happy.

It takes time to learn how to design sites that will adapt to different browsers, different displays, different browser windows, different font sizes, etc. Personally, I tend to take a KISS approach. The more complicated the design, the more you have to worry about browser quirks and about unanticipated browsing environments that break your assumptions. Also, I don't worry if MSIE gets it a little wrong, as long as the result is usable for everyone, reasonable in MSIE, and good in modern browsers. People with better browsers deserve a better browsing experience.

Fortunately, there are others who have spent years developing workarounds for MSIE's bugs. Sites like Position Is Everything have nice lists of MSIE bugs and their workarounds, which benefits those of us who just want to get a simple site design to work.

[Fouroh4]

I think everyone surfing the net deserves to see the same thing regardless of browser. Whats the point of using a work around if it still renders the page slightly wrong?

I guess my problem is that i can't let the single pixels go, this is why im obsessing over the line at the bottom of the right nav div.

i like the word perfect. I think we should all strive for this and not just for viewable content. the browsers threw down the gauntlet when they refused to adopt a standard for CSS and HTML parsing, i never walk away from a fight.

But then again, Im young and don't make the best descisions sometimes

Heres to power in pixels, Heres to besting the browsers.
-g

[pandy]

I think everyone surfing the net deserves to see the same thing regardless of browser.

That will never happen.

[Fouroh4]

it just takes a strong willed designer. Ive got this page displaying the same way in most browsers. Granted i had to use a CSS selection script based on browser but...

The ends Justify the means. A little machiavellian but apt i believe.

trust in the g.

[pandy]

In most browsers you happened to check with maybe.

[Fouroh4]

True True,

Ive got a pretty good setup here multiple machines, multiple versions of each browser installed. Ive also got a cell phone with windows mobile IE. Realistically I was able to test on:

Opera

IE Win and OSX (5.2 on OSX and 5,6 and 7 on Win) should get 8 Beta but thats at less than 0.01% on my target audience (as recorded by a GetBrowserVer script)

Firefox IE and OSX

Safari Win OSX

Windows Mobile IE (as included on HTC cells and PDA's)

For the most part, i think that covers 99% of browsers. all thats left I guess is Netscape and a few other GECKO browsers and KHTML engine (covered by Safari) Soooo, By grabbing the big browsers in each engine class I should get a fairly good test base.

This Has opened my eyes to the fact that there are 5 major families:

1. IE
2. Mozilla/GECKO (Camino, Firefox, Mozilla, Netscape 6-8, SeaMonkey)
3. KHTML (Konqueror, OmniWeb 4.5+, Safari)
4. Opera
5. Mobile Browsers (really only IE for Windows Mobile and the built in PALM browser)

Someone should make a browser that can use all these engines at the same time, how cool would it be to have a different tabs for each engine? all under the same program!

Dare to dream Graham, Dare. To. Dream.

[Darin McGrew]

I think everyone surfing the net deserves to see the same thing regardless of browser.

Go for it. Get Opera, Lynx, and Keyweb to render any page the same. Be sure to allow for different browser configurations in all 3 browsers.

The whole point of having different browsers (supporting a wide assortment of media) is for them to render pages differently.

See also Web pages aren't printed on paper. And see also the list of browsers at Dan's Web Tips: Brand-X Browsers.