28 replies [Last post]
silver_arrow_art
Offline
newbie
USA
Last seen: 12 years 46 weeks ago
USA
Joined: 2006-01-21
Posts: 2
Points: 0

I made the code for these links on my computer at home. They look fine. I go onto my dad's computer and they get all screwy.
On my computer, it looks like this (This is how it should look):

On dad's, it looks like this:

This is the CSS code stripped to the bare minimum:

#links { height:20em;}
			#links ul { list-style:none;}
			#links li {display:inline;}
			#links a {border-top:.5em solid #66ff99;}
			#links a:hover {border-top:.5em solid #06c;}

This is the HTML

<html>
<head>
<title>Title</title>
</head>
<body>

<div id="links"><!-- Links -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Art</a></li>
<li><a href="web.html">Web Templates</a></li>
</ul>
</div><!-- End Links -->


</body>
</html>

I've used this type of CSS before and it has worked on both computers. I have no clue what is wrong.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Link style troubles

Are we talk different browsers? different OSs?

My guess is your Dad has IE and you don't. Stick some margin-top on the ul element that'll fix the IE problem.

Inline elements aren't the same as block elements when it comes to the effect their borders and padding have on surrounding elements. iirc, only the space taken up by its line-height pushes against the container. So any top border like yours could well appear outside the container. My guess is IE doesn't by default give a UL element any top and bottom margins. FF does. So specify the margins yourself and ensure all browser are treating it equally.

Some people reckon putting this at the top of your CSS

* {margin: 0; padding: 0;}

equalises everything and forces you to put your own margins and padding in where they are required.

silver_arrow_art
Offline
newbie
USA
Last seen: 12 years 46 weeks ago
USA
Joined: 2006-01-21
Posts: 2
Points: 0

Link style troubles

Thanks! I'll have to try that.

Also, both my dad and I use the same OS and the same browser.

AdamSee
Offline
Regular
Last seen: 13 years 1 week ago
Joined: 2006-01-09
Posts: 14
Points: 0

Link style troubles

I noticed that as well Chris. It seems the * {padding: 0; margin: 0;}
misses out a few important elements. From what I can remember ul, ol, p, h1-6, but I'm sure there is more depending on browsers. It's quite tempting to use the * selector as it can reduce code by quite a bit by omitting the extra padding and margin.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 7 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Link style troubles

AdamSee wrote:
I noticed that as well Chris. It seems the * {padding: 0; margin: 0;}
misses out a few important elements. From what I can remember ul, ol, p, h1-6, but I'm sure there is more depending on browsers. It's quite tempting to use the * selector as it can reduce code by quite a bit by omitting the extra padding and margin.

You're not quite right there. The star selector is a selector for everything.

Try this in a browser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html dir="ltr">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<title></title>

<style type="text/css">
* {color: green;}
</style>
</head>

<body>

<p> test paragraph </p>

<h1> header </h1>

<div> test div </div>

<ul> 
<li> test 1 </li>
<li> test 2 </li>
</ul>

</body>
</html> 

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Link style troubles

AdamSee wrote:
I noticed that as well Chris. It seems the * {padding: 0; margin: 0;}
misses out a few important elements. From what I can remember ul, ol, p, h1-6, but I'm sure there is more depending on browsers. It's quite tempting to use the * selector as it can reduce code by quite a bit by omitting the extra padding and margin.


:? Adamsee the universal selector does work in the way mentioned and is a well accepted technique many use, I include it as a default rule always, I'm not sure why you think you're having problems with it as it clears margins/padding in both IE and FF on all those elements you mentioned.

Chris was commenting that he thought that IE didn't top margin the ul element and that this is one of the reasons for clearing margins/padding so there is a level playing field; in actual fact IE does both top margin and bottom margin the ul element.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

AdamSee
Offline
Regular
Last seen: 13 years 1 week ago
Joined: 2006-01-09
Posts: 14
Points: 0

Link style troubles

I see your points and I seem to be completely wrong, I often am Smile
Maybe we can try and figure this errornous behaviour in IE6 and Opera 8.51 out together.

In a site I have this:

* {
padding: 0;
margin: 0;
}

#footer p {
font-size: 70%;
margin: 0;
color: #fff;
padding: 5px 5px 5px 5px;
text-align: center;
}

#footer {
clear: both;
width: 768px;
background: #003399 url(img/bottombar.gif) no-repeat bottom left;
}

  <div id="footer" class="clearfix">
    <p><a href="terms.html">terms &amp; conditions</a> | <a href="privacy.html">privacy
        statement</a> | © Copyright  2006</p>  
	</div>

Now if I take the margin: 0; out of #footer p

In FF it displays normally, in IE it increases the top of the footer and in Opera instead of increasing the size of the footer, it adds a whitespace on top of the footer, the same size as IE. I thought with the * selector it should reach this element and not need to define the margin?

For reference the site is here: www.worthgetting.com

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Link style troubles

Hmmm, I guess I should have checked before I spoke about ULs and IE. What I did do what put Silverarts code into a page by itself (silverart's page) and noticed the difference between IE and FF - in IE the border-top disappears out of the viewport.

Given Silverart's layout and how IE's hasLayout works (hasLayout won't allow margins to collapse) it "seems" like the UL doesn't have any margin-top. If it did it would push down against its container #links, which hasLayout. So I gave the UL some margin-top (silverart's layout with UL margin-top) and voila, IE now played ball. The margin-top now pushes down against the top of #links.

Does IE give UL margin-top? All the time? I am no longer certain.

DanA
DanA's picture
Offline
Elder
Last seen: 9 years 37 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Link style troubles

Quote:
I thought with the * selector it should reach this element and not need to define the margin?

maybe unless margin for p is defined later :
* {
padding: 0;
margin: 0;
}
p {
margin: 1.5em 0 0 0;
font-size: 80%;
}

and before
#footer p {
font-size: 70%;
margin: 0;
color: #fff;
padding: 5px 5px 5px 5px;
text-align: center;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Link style troubles

AdamSee wrote:
In FF it displays normally, in IE it increases the top of the footer and in Opera instead of increasing the size of the footer, it adds a whitespace on top of the footer, the same size as IE. I thought with the * selector it should reach this element and not need to define the margin?

For reference the site is here: www.worthgetting.com

I am going to take a stab in the dark, so stand back Wink

http://www.worthgetting.com/anl.css wrote:

p {
margin: 1.5em 0 0 0;
font-size: 80%;
}

Now you know, me being me, I'd think that style rule would have some effect.

Adamsee, for your own reference, you should read up on "collapsing margins" and "the meaning of hasLayout". That explains FF and IE. As for Opera? To be honest, I don't really care, a degree of degradation in Opera is acceptable given the size of the audience.

/edit dang, beaten to the punch by DanA Laughing out loud

You know I keep seeing the advert on this site for a one day course in CSS at £375.00 a pop. I wonder if I should start giving one day training "in effective use of FF as a WebDesign aid" at £375.00 per place. No disrespect Adamsee, but discovering the above took all of 10seconds in FF. And 8 seconds of that was your page loading.

Hugo or TPH, care to help me out in this?

/edit the edit for extremely poor grammar

AdamSee
Offline
Regular
Last seen: 13 years 1 week ago
Joined: 2006-01-09
Posts: 14
Points: 0

Link style troubles

We all make simple mistakes now and then. What is painfully obvious to one person may be overlooked by another.

I'm sure by checking most of my CSS code, you can see I'm not totally stupid and have taken a lot of time and effort learning, but as with anyone, there's always something new to learn. Thank you for taking your time to correct me Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Link style troubles

Firefox WebDeveloper extension has a number of useful tools. One of which, CSS/View Style Information, allows you to see the style rules that apply to an element. The DOM Inspector gets you the same information in a more round about way, but will work when an element doesn't have any exposed area to hover over/click on.

The very first thing to check when you have a styling issue, is what style rules are being applied. Click on View Style Information, Hover over the p element in the footer and click left button. There you have the three style rules and you can see straight away where the margin is coming from.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Link style troubles

Quote:
Hugo or TPH, care to help me out in this?


What on the training course Smile you bet; money for old rope, wonder how large the classes are? beats what you can earn designing web sites.

If you mean the ul margins I'm looking at the test cases and have to conclude with your findings that IE does not always present a top-margin, but it does under normal circumstances (if there is such a thing with IE) but I'm still pondering on this and trying to get it straight what is definitely occurring.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

AdamSee
Offline
Regular
Last seen: 13 years 1 week ago
Joined: 2006-01-09
Posts: 14
Points: 0

Link style troubles

I do have that program, but I think I know what the problem maybe... The view style information has always been greyed out for me. I guess it's because I never installed the developer tools with firefox (with DOM inspector), thanks Smile

AdamSee
Offline
Regular
Last seen: 13 years 1 week ago
Joined: 2006-01-09
Posts: 14
Points: 0

Link style troubles

Just to let you know, since installing that, web design has become about 10x more productive when reaching a problem - thanks again.

DanA
DanA's picture
Offline
Elder
Last seen: 9 years 37 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Link style troubles

You could also try console2 to find the css errors.
Html validator (based on tidy) for html.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 50 min 7 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

in re: margin collapse in IE

Bruno Fassino has made a few notes regarding IE/Win: Margin collapsing and hasLayout. He followed up with a fairly exhaustive set of collapsing margin examples. By comparing correct behavior, say in Firefox, to god knows what kind of behavior in IE, you will see where the problems lie.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Link style troubles

Gary, that's not the confusing thing.

With respect of IE6/Win.
If by default a UL has a margin-top value of ~1em then adding a margin-top value of 1em to the UL's style should make no difference.

I added 1em of margin-top and got a big difference. Ergo, there wasn't any margin-top there before.

Conversely, in support of Hugo's position, if I create a sequence of elements including ULs where the only vertical margin value left at default is the UL's margin-top and all the other vertical margin values are set to 0 and all the vertical padding values are set to 0, there will still be separation between the UL and other elements.

Something wierd is going on with the default margin-top value of the UL element.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Link style troubles

As Chris say's it's a weird one, the test cases Chris posted have puzzled me and I did reference them to Bruno Fassino's collapsing IE hasLayout examples earlier and still am puzzled by the behavior, now have two ul's flowed directly in the body; body In IE has hasLayout by default, top UL sits flush to the viewport ergo no top margin; both UL have zero bottom margin, yet second UL is margined away from top one so therefore must have a top margin, and zeroing margin top does close them up but concede I'm probably overlooking some salient point; I'm going to have another play with this in the morning with a clear head.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Link style troubles

With margins hasLayout is fairly easy to understand. It works in a similar way to overflow hidden - a hard boundary against which the margin should push up against. And in this case it does - when its specified.

I'm going to speculate, IE will "absorb" any default margin-top of the first-child of a hasLayout element. If you specify a margin-top it doesn't absorb it. Here is a non-exhaustive example which support my hypothesis.

Take a look at col #2, which doesn't set margin-top, so its takes advantage of whatever the default is. Adjacent siblings are spaced according to the later siblings expected default margin-top value, ~1em (0.5em on the h1).

Take a look at col #1 and see the spacing difference now that margin-top is specified. No difference when the elements are adjacent siblings, big difference when one element is the first child of a hasLayout element.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 50 min 7 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

Link style troubles

Chris,

My results do not agree with yours. See code

    <div style="background-color: red;">xxx</div>
    <div style="background-color: red;">
      <ul style="background-color: blue;">
        <li style="background-color: green;">#1. fully collapsed</li>

        <li style="background-color: green;">no layout</li>
      </ul>

    </div>

    <div style="background-color: red;">
      <ul style="background-color: blue; margin-top: 1em;">
        <li style="background-color: green;">#2. ul has {margin-top:
        1em;} fully collapsed</li>

        <li style="background-color: green;">no layout</li>
      </ul>
    </div>

    <div style="background-color: red;">
      <ul style="background-color: blue; margin: 0; _margin-left: 40px;">
        <li style="background-color: green;">#2a. ul has {margin: 0;} fully collapsed</li>

        <li style="background-color: green;">no layout</li>
      </ul>
    </div>

    <div style="background-color: red; border: 1px solid black;">
      <ul style="background-color: blue;">
        <li style="background-color: green;">#3. outer container has
        border</li>

        <li style="background-color: green;">no layout</li>
      </ul>
    </div>

    <div style="background-color: red;">

      <ul style="background-color: blue; padding-top: 1px;">
        <li style="background-color: green;">#4. ul
        bordered</li>

        <li style="background-color: green;">no layout</li>
      </ul>
    </div>

    <div style="background-color: red; border: 1px solid black;">
      <ul style="background-color: blue; _height: 1px;">

        <li style="background-color: green;">#5. outer bordered</li>

        <li style="background-color: green;">ul has layout</li>
      </ul>
    </div>

    <div style="background-color: red;">
      <ul style="background-color: blue; zoom: 1;">
        <li style="background-color: green;">#6. same as #1, fully
        collapsed</li>

        <li style="background-color: green;">ul has layout</li>
      </ul>
    </div>

#1 has collapsed with its container. A 1em margin exists above and below.

#2 has an explicit 1em of top margin which collapses with #1, but also has 1em of implicit margin combined with #2a's 0 margin totals 1em.

#2a has 0 margin top and bottom. It abuts #3 which has margins contained.

#s 4, 5 & 6 are more combos.

The conclusion is that both Firefox and IE default to about 1em top and bottom margin on ul. Which leaves us with collapsing margins and how the UAs handle them.

[edit] Chris, you were posting while I went to watch "Desperate Housewives" and a little Mavs thump-ball. I'll give your last a read. [/edit]

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Link style troubles

Not that it should impace on my hypothesis, but in the OP's orginal question, the UL doesn't have layout, its container (#links) does. LI might not be a good example, iirc IE doesn't normally give LI elements any vertical (margin) spacing.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Link style troubles

It looks as though the premise that hasLayout=true on a parent always un-collapses margins in IE is possibly erroneous(Bruno: ex 3a/3b)

The ul does have top and bottom margins; easily proven by removing a ul's bottom margin and flowing a second ul, there will be a gap.

The first child element of a parent demonstrates the expected behavior, that of collapsing it's margin, thus sitting flush to it's parents internal border, adding a top padding un-collapses it, what does not happen is that by putting the parent into hasLayout=true, no padding; that un-collapsing is achieved.

All I can conclude is that I can not achieve un-collapsing using hasLayout alone and that in actual fact observed behavior is as expected :?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Link style troubles

Hugo wrote:
It looks as though the premise that hasLayout=true on a parent always un-collapses margins in IE is possibly erroneous(Bruno: ex 3a/3b)

I disagree.

My example shows: default spacing absorbed (or collapsed). specified margin not absorbed (not collapsed). I am reluctant to use collapsed, because (as my example shows) if there is no margin on the other side of the hasLayout boundary, the default spacing still disappears. With margin-collapsing, one margin, the largest, would still provide spacing. With hasLayout and default spacing, only the element external to the hasLayout element can provide spacing. The first-child can not.

I think the problem is our assumption that the default spacing IE provides is "margin". My simple example shows that although margin is similar to that default spacing, when the element butts up against the inside of a hasLayout boundary default spacing is treated differently from specified margin-top.

For information, its probably worth seeing if there is a difference in how margin-bottom is treated when it comes up against the interior bottom boundary of hasLayout.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Link style troubles

You correct to disagree Chris, I was confusing my self, ignore that statement Smile

It looks as though hasLayout destroys the default spacing of the first child.

Given a paragraph flowed first in the body with zero bottom margin, followed by a div without hasLayout and in that a paragraph element with default values the nested paragraph demonstrates a collapsed margin, being flush with it's parent and the parent margined away from the paragraph element above it.

Invoke hasLayout=true on the parent and the expected behavior would be that the nested first child paragraph of the parent would manifest it's default margin-top from within the parent when in actual fact invoking hasLayout has the effect of seeming to remove the default spacing altogether as the gap between parent and outside paragraph closes up.

Adding margin-top to the first child of parent does indeed rectify the situation with hasLayout then producing expected result in containing the collapse or un-collapsing.

Which does seem to support the assertion that we are dealing with two different states of spacing the actual default? one and the one we assume to be the default that of 'Margin'

I also experience the exact same set of conditions applied to a paragraph flowed on the bottom of the parent div in relation to a paragraph following after the parent.

So I follow your reasoning on this at present Chris, we seem to be dealing with either a spacing default other than margin or I'm just stir crazy, still have niggling feeling that I'm missing some point amongst all this

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Link style troubles

Laughing out loud

* {margin: 0; padding: 0;}

Then set the margins, IE will behave more predictably.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Link style troubles

:? and how does that effect what was being discussed Chris? it wasn't about setting margins but about defaults, we know what zeroing margins and padding will achieve.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Link style troubles

It doesn't affect it. It sidesteps it. Anyone who has

* {margin: 0; padding: 0;}

will never come across this problem. That HAS to be an advantage. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Link style troubles

I guess that is why I have always used that rule set, long before it became widely talked about and advocated it's use whenever possible and why these sorts of problems have not been apparent to me.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me