6 replies [Last post]
mikeskin
Offline
newbie
US of A
Last seen: 14 years 11 weeks ago
US of A
Joined: 2007-08-15
Posts: 2
Points: 0

I am trying to make the transition from table based layout to div, it's been a tad difficult. I currently have an issue that I have been unable to figure after working on it all day.

I want my bullets to be aligned under the "S" of the word subheading in both left and right div containers. My goal is accomplished in Firefox 2.0.0.6 but IE 7 is displaying the bullets indented about 30 or so pixels. I think it's a padding issue but not sure.

Any incite would be greatly appreciated.

Here is the code:

Untitled Document

@charset "utf-8";
body {
background: #006666;
margin: 0;
padding: 0;
}

h2 {
font-size: 1.25em;
color: #ffffff;
}

#container {
width: 950px;
background: #2f2f2f;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}

#subheadingContainerLft ul {
padding-left: 195px;

}
#subheadingContainerLft h2 {
padding-left: 180px;
padding-right: 0px;

}
#subheadingContainerLft {
float:left;
border: 1px solid #FFFFFF;
width: 450px;
background-color: #996633;
}
#subheadingContainerRt {
float: left;
border: 1px solid #FFFFFF;
width: 480px;
}
#subheadingContainerRt h2 {
margin-left: 0px;
padding-left: 0px;
}

#subheadingContainerRt ul {
padding-left: 15px;
}


subheading container left



  • Whatever Whatever

  • Whatever Whatever

  • Whatever Whatever

  • Whatever Whatever

  • Whatever Whatever

  • Whatever Whatever




subheading container right



  • Whatever Whatever

  • Whatever Whatever

  • Whatever Whatever

  • Whatever Whatever

  • Whatever Whatever

  • Whatever Whatever




wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

IE uses margin to indent a

IE uses margin to indent a list while Firefox uses padding. You've controlled the padding but not the margin. Zero the margin for IE to conform.

mikeskin
Offline
newbie
US of A
Last seen: 14 years 11 weeks ago
US of A
Joined: 2007-08-15
Posts: 2
Points: 0

wolfcry911 wrote:IE uses

wolfcry911 wrote:
IE uses margin to indent a list while Firefox uses padding. You've controlled the padding but not the margin. Zero the margin for IE to conform.

Well my friend, that most certainly took care of that issue. Thanks so much for taking the time to make my life a whole lot easier. Many thanks, I am greatful for this forum. :thumbsup:

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 11 years 38 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

Margins & Padding are annoying

Because of this problem and others like it I put:

* {margin:0; padding:0} at the start of nearly all my css's.

I wonder who had it worse, people dealing with inconsistent train gauges or us.

LokiLoks

Flumpy
Offline
newbie
London
Last seen: 14 years 19 weeks ago
London
Joined: 2007-08-16
Posts: 6
Points: 0

Different browser interpretations

Sorry, double-posted.

Flumpy
Offline
newbie
London
Last seen: 14 years 19 weeks ago
London
Joined: 2007-08-16
Posts: 6
Points: 0

Different browser interpretations

Different browsers all have slightly different interpretations of standard elements, whether it be padding/margins on the body, paragraph spacing or list indentation. This can be very confusing when starting out with CSS.

I've found the best way to tackle this is to reset everything back to zero, then to add in the values you want. For new site builds, I start off with a couple of lines like this:

body, div, form, label, fieldset, legend, img, p, h1, h2, h3, h4, h5, ul, li, a, table, td, tr, th { border: solid 0 transparent; margin: 0; padding: 0; color: #292929; } ul, ol { list-style: none; } body { font: 0.75em Verdana, Arial, Helvetica, sans-serif; background: #fff; margin: 5px; /* default browser font size=16px. 16px * 0.75=12px */ }

Also worth noting is that list items can be problematic. As someone's outlined above, browsers differ in their list and list item indent implientation. In most regular lists (eg vertical lists, one item stacked above the other) it's not a problem. But if you're creating a horizontal footer-nav list, for example, with a background image (or border) to the left/right of items to act as vertical dividers, you may find it's a pain to get the divider equally spaced between list items. This is particularly the case between IE 6 and Firefox 1.x/2.x. I managed to resolve this by tweaking the padding and margins on the list and on the list items, like this:

div#nav-footer ul { padding: 3px 2px 4px 2px; } div#nav-footer ul li { float: left; padding-right: 7px; padding-left: 7px; background-image: url(../images/nav/footer_divider.gif); background-position: right center; background-repeat: no-repeat; color: #fff; } div#nav-footer ul li.lastitem { padding-right: none; background-image: none; }

Cheers,
Flumps

iamzinn
Offline
newbie
Last seen: 13 years 29 weeks ago
Joined: 2008-06-27
Posts: 1
Points: 0

But what if it does apply to vertical lists?

I understand the basics of this issue, however I have a vertical list issue that mirrors this problem. I have already taken care to zero out my margins and paddings for each of the li, but I still get significant extra padding when I view the page in IE7. The site is live right now if anyone would care to take a gander at what I am speaking of - www.thepigskin.com. the nav column on the left is the problem child. HELP!