ul appears off screen in ie7

ul, neg margin, disappearing element

[Richardps27]

I have put navigation down the left side and used an <ul> tag to create the list. The indent was slightly too much, so I used a negative margin to decrease it.

#side_bar ul {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: -15px;
}

In Firefox this looks fine, just what I wanted, but in ie7 the text disappears off the left edge of the screen.

I'm not very knowledgable about browser issues, that seems to be part of the problem.

Thanks

[SuzyUK]

Hi and Welcome Richardps27

different browsers have always have treated the "indent" of lists differently, some use padding to control the default indent and some use margin

by setting a negative margin, you will be dealing with one of two of the choices but you will be 'alienating' the other also..

so to avoid the 'feed different stylesheets' train of thought the best advice is to zero both the left padding and left margin, in fact zero them all, and then use one or the other for your required spacing.. sounds weird but this rule has served well and has been a solid rule of thumb in the last few years or so..

e.g. (to use your code)
#side_bar ul {
padding: 0; margin: 0; /* zero both */

/* then set what you require either padding or margin */
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 3px;
}

-Suzy