Re: [NZ.WEB.DEV] What's wrong with this picture? Help needed with a CSS issue.

[steve yeoman]

Have you tried adding !important to the declaration you want to over ride the others?

On Thu, Jun 7, 2012 at 11:32 AM, Andrew Malcolm <andrewma...@gmail.com> wrote:

Hoping somebody might be able to give me a quick answer. I've specified a style for .graphic_nav ul, as you can see in the image below, it's on line 757 of style.css The problem is margin:0; being overridden by #content ul which is on line 22 of style.css I can't see it being a specificity issue since .graphic_nav ul is just as specific as #content ul, and even if I use an id instead of class on the .graphic_nav parent element, it behaves in exactly the same way. It doesn't seem to be a browser specific issue either. Anyone have any ideas?

Thanks,

Andrew

--
You received this message because you are subscribed to the Google Groups "NZ Web Dev" group.
To view this discussion on the web visit https://groups.google.com/d/msg/nz-web-dev/-/-Q2mZQak4asJ.
To post to this group, send email to nz-we...@googlegroups.com.
To unsubscribe from this group, send email to nz-web-dev+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/nz-web-dev?hl=en.

[Paul Bennett]

1. id's override classes (but you've dealt with that)
2. in the case if rules with identical specificity, the rule loaded last overrides the rules previously loaded

so it's likely to be an issue with the order that the css / stylesheets are loaded in 

Regards,

Paul Bennett

MoveForward - Web Development for Design Companies

http://www.moveforward.co.nz

06 308 9722

027 255 8495

[Sid Bachtiar]

Try #content .graphic_nav ul

That would be more specific than #content ul

On Thu, Jun 7, 2012 at 11:32 AM, Andrew Malcolm <andrewma...@gmail.com> wrote:

Hoping somebody might be able to give me a quick answer. I've specified a style for .graphic_nav ul, as you can see in the image below, it's on line 757 of style.css The problem is margin:0; being overridden by #content ul which is on line 22 of style.css I can't see it being a specificity issue since .graphic_nav ul is just as specific as #content ul, and even if I use an id instead of class on the .graphic_nav parent element, it behaves in exactly the same way. It doesn't seem to be a browser specific issue either. Anyone have any ideas?

Thanks,

Andrew

--
You received this message because you are subscribed to the Google Groups "NZ Web Dev" group.
To view this discussion on the web visit https://groups.google.com/d/msg/nz-web-dev/-/-Q2mZQak4asJ.
To post to this group, send email to nz-we...@googlegroups.com.
To unsubscribe from this group, send email to nz-web-dev+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/nz-web-dev?hl=en.

--

Blue Horn Ltd - System Development
http://bluehorn.co.nz

[Jay]

Try  #content .graphic_nav  ul

[Paul Bennett]

yes, but the declaration *later* in the file is overriding the one *earlier* in the file right?

Regards,

Paul Bennett

MoveForward - Web Development for Design Companies

http://www.moveforward.co.nz

06 308 9722

027 255 8495

On Fri, Jun 8, 2012 at 10:17 AM, Andrew Malcolm <andrewma...@gmail.com> wrote:

Thanks guys!

Steve, I hadn't thought of that, was looking out for it in the original declaration in case that was causing the override, but didn't think to use it in the later one. #content .graphic_nav ul did it in the end. But it still leaves me wondering why line 22 was overriding line 757. I've not seen that before. Paul, I was wondering if it was to do with the order of stylesheets loading, but both declarations are in the same file. Oh well, at least it works now.

Andrew

--
You received this message because you are subscribed to the Google Groups "NZ Web Dev" group.

To view this discussion on the web visit https://groups.google.com/d/msg/nz-web-dev/-/CEZMZ63z2TYJ.

[Andrew Malcolm]

No, the *earlier* declaration is overriding the *later* one.

[Jochen Daum]

Have you tried to turn javascript off - maybe there is something that touches existing css?

HTH, Jochen

[Andrew Malcolm]

True, that's a very real possibility. Will give it a try when I get a chance, for our purposes right now the #content .graphic_nav ul solution works fine. Thanks for the suggestion Jochen.

Andrew

On Fri, Jun 8, 2012 at 11:24 AM, Jochen Daum <j...@automatem.co.nz> wrote:

Have you tried to turn javascript off - maybe there is something that touches existing css?

HTH, Jochen

--

[Jay]

#content .graphic_nav ul 

<div id="content">

<div class="graphic_nav">

<ul>

<li>something</li>

<li>something</li>

<li>something</li>

</ul>

</div>

</div>

Your html code will look like this.

and in the css, the ID style will always override the class style.

doesn't mind *earlier* or *later*.

On Fri, Jun 8, 2012 at 11:24 AM, Jochen Daum <j...@automatem.co.nz> wrote:

Have you tried to turn javascript off - maybe there is something that touches existing css?

HTH, Jochen

--

[Sid Bachtiar]

Seems to me like the parent # overrides child # then

[Andrew Malcolm]

Here is what I did yesterday, this works fine for my purposes.

This is what the html actually looks like...

<article id="content" class="full homepage">

...

<div class="one_third last ">

<ul class="graphic_nav">

<li></li>

<li></li>

<li></li>

</ul>

</div>

</article>

And here's what I've got in the css now (in this order)...

...

#content ul {
margin: 0 0 22px 40px;
line-height: 22px;
}

...

#content .graphic_nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 269px;
}

Before I got that working I had tried this...

<article id="content" class="full homepage">

...

<div class="one_third last ">

<ul id="graphic_nav">

<li></li>

<li></li>

<li></li>

</ul>

</div>

</article>

...

#content ul {
margin: 0 0 22px 40px;
line-height: 22px;
}

...

#graphic_nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 269px;
}

And this...

<article id="content" class="full homepage">

...

<div class="one_third last " id="graphic_nav">

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</div>

</article>

...

#content ul {
margin: 0 0 22px 40px;
line-height: 22px;
}

...

#graphic_nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 269px;
}

I also tried these two with classes instead of IDs.

I'm fairly confident that if I were to turn off JS like Jochen suggested, that will solve the root problem, because as far as I can tell there's no reason any of the above shouldn't work. I've never had trouble with the above methods in the past.

Thanks

Andrew