Mozilla vs. Internet Explorer

[hgwoss]

Hi everyone,

in order to position elements on a website I have mostly used CSS. The
page displays fine in Mozilla. In Internet Explorer it is all screwed
up. Maybe someone can give me a few hints, on what exactly is causing
this. You can visit the page at http://romm.vs138162.vserver.de/open

Thanks in advance
Robert.

 

[hgwoss]

Let me give you a few examples on what is going wrong on my page:

The <div class="horizontal_ruler_438px margin-bottom_15px"> element is
supposed to draw a line with a height of 1px. In mozilla this is
working fine. In IE the height is much greater.

Also the gaps between <div class="container_hauptmenu clear_left"> and
<div class="container_hauptinhalt">, as well as between <div
class="container_hauptinhalt_links"> and <div
class="container_aktuelle_themen"> are not displayed properly in IE. In
Mozilla you can see what it is supposed to look like.

 

[hgwoss]

I have figured out most of the problems, by adjusting values, although
I do not know, what caused the problems.
But I still don't have the <div class="horizontal_ruler_438px
margin-bottom_15px"> element at the right height of 1px.

 

[hgwoss]

I have figured out most of the problems, by adjusting values, although
I do not know, what caused the problems.
But I still don't have the

<div class="horizontal_ruler_420px margin-bottom_15px">

element at the right height of 1px.

The css file can be found at
http://romm.vs138162.vserver.de/open/style.css

 

[hgwoss]

I assume IE is not letting me set the height of a <div> element to any
value less then line-height. Does anyone know wether or not this is tha
case?

Thanks
Robert

 

[Jonathan N. Little]

I have figured out most of the problems, by adjusting values, although
I do not know, what caused the problems.
But I still don't have the <div class="horizontal_ruler_438px
margin-bottom_15px"> element at the right height of 1px.

Firstly, you have some markup errors, most not too serious but some
serious enough to cause problems, your doctype of XTML is not forgiving.

Once note though, your choice of class naming defeats the beauty of CSS.

example "horizontal_ruler_438px" what happens later down the road you
decide "200px" works better? Your class will either have a deceptive
name of "horizontal_ruler_438px" or your have to change ALL INSTANCES of
"horizontal_ruler_438px" on your website to "horizontal_ruler_200px".

Better class names that describe purpose and not the style, for example

Intro, Boilerplate, PictureBox, Detailed_Desc, Handy_Shortcuts

so if you define

..Boilerplate {
font-size: .75em;
color: white;
background-color: black;
border: 1px solid red;
}

then later you change the color scheme of your site

..Boilerplate {
font-size: .85em;
color: black;
background-color: silver;
border: 0;
width: 50%;
float: right;
}

you can do so but if it was named "white_on_black_dot75em" the call name
would be confusing, right?

 

[kchayka]

The page displays fine in Mozilla.

Hmmm... I suspect you haven't tested this with text zoomed up a couple
notches...

Maybe someone can give me a few hints

Forget about trying to make a pixel-perfect layout. It won't happen and
you'll only set yourself up for failure.

http://romm.vs138162.vserver.de/open

As for that 1px high divider div, why don't you just use a top or bottom
border instead?

 

[hgwoss]

First of all thanks to Jonathan and kchayka for replying.

The updated source can be found at
http://romm.vs138162.vserver.de/open/index1.php
The updated stylesheet can be found at
http://romm.vs138162.vserver.de/open/style1.css

I have got rid of the markup errors.

Once note though, your choice of class naming defeats the beauty of CSS.

Most of my classnames were already describing the purpose and not the
style. As for horizontal_ruler_438px. You were right about that. That
class is not even necessary.

As for that 1px high divider div, why don't you just use a top or bottom
border instead?

Thanks for that one kchayka. It solved the problem and is actually a
much better approach.

Hmmm... I suspect you haven't tested this with text zoomed up a couple
notches...

I see what you mean. But what can I do about it? I guess that problem
appears with every "pixel-perfect layout", as you called it. I could
easyly do without a "pixel-perfect layout", but I do want the
horizontal ruler on the left hand side be at the bottom of the box on
the right hand side. I don't know how to accomplish that in another way
then setting the hight of both the right hand and the left hand
elements, which are <div class="container_hauptinhalt_links"> and <div
class="container_aktuelle_themen">.

Also I used "float:left" a few times in order to align <div> elements
horizontally. And far as I know, when using "float:left", I have to set
the widh of that element. Which, again will screw up the design when
zooming up.

Am I right?

Robert.

 

[Jonathan N. Little]

(e-mail address removed) wrote:

Also I used "float:left" a few times in order to align <div> elements
horizontally. And far as I know, when using "float:left", I have to set
the widh of that element. Which, again will screw up the design when
zooming up.

Am I right?

No, not if you use a unit measurement that is based on the size of the
text such as 'em'. Then as the text grows or shrinks so does the container.

If you use 'float' you will also want to research the 'clear' property.