Over lapping txt with IE

HTML & CSS
1

I have a problem with a site I built.

the article pages when loaded for the first time in IE will be over lapped or the title will be under the subtitle and even the title in the middle of the first paragraph.

http://www.clarencenorrismd.com/article/

(click on the links from the page above to the different articles to see the problem)

All the articles if loaded by IE will have some flaw but one or two. Now nothing happens with Chrome Firefox or Safari as far as i have seen or herd.
And once you refresh the page it will be just fine or navigate away and come back to it.

can anyone see a flaw or know why this can be happening?

note** it has been seen doing this on IE 7 and IE 8

thanks

2

Hi nezie, Welcome to SitePoint! :slight_smile:

I can’t seem to reproduce the problem you described in IE7 or 8.
The sub pages linked to from the article page all looked the same as FF.

I looked closely at them but perhaps I am missing some minor detail.

3

I changed around the coding a bit and came out with the same look and it seams to have solved the problem. I am not sure what was causing it but hopefully it is gone for good.

I do have one last problem though and that is having the “Article” menu to say the highlighted color when navigating to the sub pages. the “Article” page is the parent of all the individual articles. I know I do not have my css setup right to allow this and haven’t found a solution or a anything to explain how to.

4

You would need to add class=“current” back to the html around the Articles link. There’s no way to target it on certain pages using css (unless you have different style sheets for different pages but that would just get confusing).

If you have access to the html you can add it back yourself, but you’d be stuck if you can only edit the css. If the articles are generated from a database you can still fix this even though the article pages don’t exist as html. You just need to add the class to the html on the “template” page that the articles use.

5

I am using a CMS SilverStripe

and the menu changes from current, link, section

This is the when the “Article” page the parent is selected

<a class="current" title="Go to the Articles page" href="/article/">Articles</a>

Then the class changes to this when one of the child pages are selected

<a class="section" title="Go to the Articles page" href="/article/">Articles</a>

and of course when not selected at all.

<a class="link" title="Go to the Articles page" href="/article/">Articles</a>

The Css for it is

 }
 a:link {
	color: #003399;
}

 #menu a {
	display: block;
	padding-left: 20px;
	margin-top: 40px;
	text-decoration: none;
	font-size: 18px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
}

 #menu a:hover , #menu a.current {
	color:#003399;
	text-decoration: none;
}

since the child pages are using the section class could i not just add the section class to the css like the current is?

6

since the child pages are using the section class could i not just add the section class to the css like the current is?

Yes, it looks like you could style the section class so it is “highlighted.” I didn’t even notice that class before, but they seem to have planned for just such a need and added the class automatically, even if nothing is applied yet. How convenient. :smiley:

7

*** Fixed I added #menu in front of the a.section and it now works perfect



#menu a.section{
     color:#003399;
     text-decoration: none;
}

Ok this is not working like i thought it would

i have a style done for the class “section” i have also tried to do it like the current and it didn’t even show up so i changed it to the one that shows up in firebug but it is put under the #menu a so it is overridden.

This is the current class that i basically duplicated and swapped current with section and it gave me nothing.

}
}
 #menu a:hover , #menu a.current {
    color:#003399;
    text-decoration: none;
}
#menu a.section {
    color:#003399;
    text-decoration: none;
}

So then i tried out this below and it showed up in firbug but it was under the #menu a and everything overridden.


}  
a.section {
    color:#003399;
    text-decoration: none;
}

What Firebug shows a.section is striked out (I added the tags “<strike></strike>” were firbug had them striked out)

#menu a {
color:#FFFFFF;
display:block;
font-size:18px;
font-weight:bold;
margin-top:40px;
padding-left:20px;
text-align:center;
text-decoration:none;
}
layout...1356888 (line 78)
.typography a:visited {
<strike>color:#003399;</strike>
}
typogr...1356970 (line 4)
a.section {
<strike>color:#003399;</strike>
<strike>text-decoration:none;</strike>

any clue to why the “section” style is being over ridden and not being call upon?

8

I don’t see any class called .section in your html

9

Hi, the reason is because the #menu a{} rule has more specificity then the a.section{} rule

Make it #menu a.section{} :slight_smile:

If that isn’t working , then see if anythings overriding it.

I ntoice in your first snippet you post there is two brackets at the beginning snippet of it. Make sure your CSS is valid also :). That can cause rules to be ignored.