Site Ratings & Reviews - Having Problems making ie/mozilla look the same

Author

Having Problems making ie/mozilla look the same

Jon L

2004-09-09, 7:23 pm

Last time I asked for help I got plenty of helpful suggestions hopefully
this time will be no different. I am having a problem getting the same
look in IE and any other browser. My biggest problem is my nav menu:
positioning and hover effects. When I position it for IE it is then off
for other browsers.

Here is the URL any help would be appreciated:

http://www.projectdestiny.net/test.html

Thanks,

Jon

2004-09-09, 11:15 pm

Jon L wrote:

> Last time I asked for help I got plenty of helpful suggestions hopefully
> this time will be no different. I am having a problem getting the same
> look in IE and any other browser. My biggest problem is my nav menu:
> positioning and hover effects. When I position it for IE it is then off
> for other browsers.
>
> Here is the URL any help would be appreciated:
>
> http://www.projectdestiny.net/test.html

You have tripped over an IE bug. Sometimes with heavily nested divs it
duplicates a margin. You have specified 24px for the div selected by
#linkWrapper. IE is using 48 pixels. All the other browsers are correctly
using 24 pixels.

One fix for you is to remove the margin for all the inner elements
(navigation, top bar ...) and apply a padding of 24px to the mainLayout div.

BTW you have far too many divs and far too much CSS controlling them. You do
not need all of those wrapping divs, even for that nice red border. Apply
the red border to the body element, which is already there. Remember, KISS.

--
Cheers
Richard.

Jon L

2004-09-09, 11:15 pm

rf wrote:
>
> One fix for you is to remove the margin for all the inner elements
> (navigation, top bar ...) and apply a padding of 24px to the mainLayout div.
>
> BTW you have far too many divs and far too much CSS controlling them. You do
> not need all of those wrapping divs, even for that nice red border. Apply
> the red border to the body element, which is already there. Remember, KISS.
>

Richard,

Thank you very much, I removed 3-4 more div's, do you see anymore that I
could remove? Also, I cannot get the hover effects to match in Mozilla
and IE. In Mozilla the whole block changes color, while in IE only the
hypertext background changes to the red I specified.

Thanks,

Jon

2004-09-10, 4:16 am

Jon L wrote:
> rf wrote:

You do[color=darkred]
Apply[color=darkred]
KISS.[color=darkred]
>
> Richard,
>
> Thank you very much, I removed 3-4 more div's, do you see anymore that I
> could remove?

It's hard when you are trying to fix something from the inside out. It is
far easier to scrap all the CSS and all the div's you need to support that
CSS and start again (this is what I would do to fix that page).

Start from the outside, working in. As you do let inheritance work.

For example, style the top div color: blue, that way you don't need to
colour each element within that div.

As you work in, look for something that is already there to style. Look also
for a selector that may not need you to specify an additional class. ".nav
a" gets all <a> elements inside a <... class=nav> )

Only style what you *need* to.

Do *not* duplicate properties (font-family for example). If you need to
specify the same property in two different rules then look up, or outwards,
and find an enclosing element you can style. Font-family for example should
be specified at the <body> level.

If it doesn't exactly come out as per your back of the envelope sketch,
amend the sketch, don't complicate the page. You will never, ever get it to
look exactly the same in all browsers so don't try to make it look exactly
like your sketch.

Working through page...

The red border. Style the <body> element. The gap inside that, padding on
the <body> element. No need for extra divs.

Hmmm, that top stuff, there is a green border and several things inside. A
div, yes, class="topstuff". However, no div for the "Located..." paragraph
which should *NOT* be blinking BTW. It is a p. Style the p. Do *not* apply a
margin to each element in the div. Apply padding to the div. Notice (below)
that I have not styled anything inside this div at all, except to float the
logo. However I did not give the logo a seperate class, I got to it with
".topnav img"

No div for the nav bar. It is already in a ul which you can style. Same for
the rest of the content. This is in a series of paragraphs. Style the p.s
again. You *could* put them all inside a div so you only have to specify the
class once for the div and not for each p but in this case there are only
two of them.

The copyright notice is already in a p. Style that p.

End result: one div :-)

Had a bit of a play...

http://users.bigpond.net.au/rf/child/

> Also, I cannot get the hover effects to match in Mozilla
> and IE. In Mozilla the whole block changes color, while in IE only the
> hypertext background changes to the red I specified.

IE does not use the hover pseudo class for anything other than the <a>
element. You are using it on a <li> element as well as the <a> element.

Specify display: block for the <a> elements. Move the padding from the <li>
to the <a>. You can omit the li:hover rule . (see above).

--
Cheers
Richard.