css design

[MWSunshine]

Hi !

Thanks to advises from you I finally know how to create a highlighted menu
using CSS.
But I encountered another problem.
If you could just take a look at
http://www.republika.pl/mwsunshine/index3.html and explain me what am I
doing wrong that in IE this page is displayed correctly, but in Mozilla the
menu elements are displayed incorrect?
And what to do to have in Mozilla the same effect as in IE, the effect of
right margin - the same as on the left side...
I think I saw somwhere an article about differences between IE and Mozilla
in interpreting the "margin" property, but i can't figure out where was
it.....

MWSunshine

 

[Mark Parnell]

Hi !
G'day.

http://www.republika.pl/mwsunshine/index3.html and explain me what am I
doing wrong that in IE this page is displayed correctly, but in Mozilla the
menu elements are displayed incorrect?

First step: validate your (X)HTML and CSS, then see if it is still
happening.

It is generally advisable to get it working properly in a decent browser
like Mozilla first, then once that is working, make adjustments for IE
if necessary.

I think I saw somwhere an article about differences between IE and Mozilla
in interpreting the "margin" property, but i can't figure out where was
it.....

Well, first of all you are putting IE into "quirks" mode, where it
replicates the bugs of earlier versions. The doctype declaration must be
the first thing in the page, then see what happens.

BTW: I like your choice of editor.

 

[rf]

Hi !

Thanks to advises from you I finally know how to create a highlighted menu
using CSS.
But I encountered another problem.
If you could just take a look at
http://www.republika.pl/mwsunshine/index3.html and explain me what am I
doing wrong that in IE this page is displayed correctly, but in Mozilla the
menu elements are displayed incorrect?
And what to do to have in Mozilla the same effect as in IE, the effect of
right margin - the same as on the left side...
I think I saw somwhere an article about differences between IE and Mozilla
in interpreting the "margin" property, but i can't figure out where was
it.....

Throw in some testing borders:
* {margin: solid 4px yellow;}

You will be able to see where each element is going. It will be something to
do with either your menu div, your ul or your li's.

One of them has incorrect margin-left or padding-left. Seeing the borders
makes it immediately obvious.

I *could* do it for you but I would have to steal your site down to my local
file system first. However, I do notice that you do not have a margin-left
in your li rule. The default for margin-left in a li is something like 3ems.
That is where the li puts its bullet. As well as removing the bullets you
have to remove this margin.

Keep in mind that the script element and the <?xml stuff before the doctype
is putting IE into quirks mode where the standard IE margin bugs are
faithfully reproduced.

Also keep in mind that popups are being increasingly blocked these days.

 

[MWSunshine]

Keep in mind that the script element and the <?xml stuff before the doctype
is putting IE into quirks mode where the standard IE margin bugs are
faithfully reproduced.

Also keep in mind that popups are being increasingly blocked these days.

Arrghhh.. This is something what is added by ISP - this is my temporary
place where I am putting pages for showing to others when testing. So this
part with js is not a part of my page.

After adding {border solid 2px yellow} I can see now that Mozilla is
displaying correctly the DIVs, but IE dont. Its hust the <li> elements wich
are moved to the right in Mozilla. Strange... now even in IE....

 

[rf]

Arrghhh.. This is something what is added by ISP - this is my temporary
place where I am putting pages for showing to others when testing. So this
part with js is not a part of my page.

You get what you pay for. In this case you are paying to have your site
trigger quirks mod in the viewers browser

After adding {border solid 2px yellow} I can see now that Mozilla is
displaying correctly the DIVs, but IE dont. Its hust the <li> elements wich
are moved to the right in Mozilla. Strange... now even in IE....

Adding margin-left: 0; to your ul rule fixes all. Perhaps I was wrong, it
may be the ul that puts the bullets in its margin. I can never remember and
usually end up putting margin-left: 0; in both of them

Don't forget to take it over to the validator, both (X)HTML and CSS. The
different browsers error correction algorithms differ even more than the
actual browsers do.

 

[Toby Inkster]

Throw in some testing borders:
* {margin: solid 4px yellow;}

Spot the deliberate mistake.

 

[rf]

Spot the deliberate mistake.

Er, woops

 

[MWSunshine]

Adding margin-left: 0; to your ul rule fixes all. Perhaps I was wrong, it
may be the ul that puts the bullets in its margin. I can never remember and
usually end up putting margin-left: 0; in both of them

margin-left: 0pxp; didn't help but margin: 0px; - did it for me !
You can test it http://www.republika.pl/mwsunshine/index3.html
The style sheet is:
http://www.republika.pl/mwsunshine/index3_style.css

Thank you !
MWSunshine