Frozen Links - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Frozen Links

floated div covering links

calmseas

4:50 am on Mar 12, 2011 (gmt 0)

10+ Year Member

This humble newbie is missing a basic concept. In the following navigation bar code snippet, when the <div id="headerTitle"> is not commented out, the link above to 'Home' will not activate (clicking on the cursor produces no action). When it is commented out, the link above is active. What am I missing?
Also, on my development computer, it doesn't seem to make any difference whether "headerTitle" is commented out or not, the link is still active. However, when an offsite user clicks on 'Home', the "headerTitle" <div> must be commented out for the link to be active. This is most puzzling to me.
Any help is appreciated.

#topNavBar {
margin-bottom: 50px;
width: 98% ;
background-color: #0C71B1;
float: left ;
padding-left: 10px ;
}
#headerTitle {
font-size: 2.5em ;
font-style: italic ;
color: #993300 ;
padding-left: 25% ;
padding-top: 150px ;
}

<div id="topNavBar">
<a href="http://www.example.org/index.html" title="Home Page" class="menuLink">Home</a>
<br class="clear" />
</div>

[edited by: alt131 at 7:55 pm (utc) on Jul 9, 2011]
[edit reason] Examplifying href [/edit]

webprutser

11:05 am on Mar 12, 2011 (gmt 0)

10+ Year Member

If have no problems when both div's are used. This is my html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>test</title>
<meta name="keywords" content="testfile forum">
<link rel="styleSheet" type="text/css" href="test_1.css">
</head>

<body>

<div id="topNavBar">
<a href="http://www.example.org/index.html" title="Home Page" class="menuLink">Home</a>
<br class="clear" />
</div>
<div id="headerTitle">Members Only Page</div>
</body>

The css was put in a separate CSS-file. Maybe something is wrong with the header of your html-page?

[edited by: alt131 at 7:55 pm (utc) on Jul 9, 2011]
[edit reason] Examplifying href [/edit]

webprutser

11:05 am on Mar 12, 2011 (gmt 0)

10+ Year Member

p.s. </html> should be added, at the end of the page.

alt131

1:57 pm on Mar 12, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi calmseas, what an interesting issue :)

You don't mention browser types or versions, but in my tests that made the difference. However, this is a code issue, not a browser one.

To see the effect of your code, set a border on #headerTitle. Note the border also goes round the outside of #topNavBar. That is because #topNavBar has been floated, and that removes it from the ordinary flow. So #headerTitle is drawn as if #topNavbar does not exist.

If you also set a background-color on #headerTitle you see that some browsers draw #topNavBar on top of #headerTitle. Others draw it below - which prevents the user from clicking on the link because it is "under" another element.

All this is caused by setting #topNavBar to float:left. I am not sure why that is required because it also has a width of 98% - so unlikely another element will squeeze into the 2% page width remaning.
So if the float is not required, remove it from #topNavBar.
If the float is required, set clear:both on #headerTitle and it will be drawn "below" #topNavBar.

calmseas

6:53 pm on Mar 12, 2011 (gmt 0)

10+ Year Member

alt131 -

EXCELLENT! The clear:both in the #headerTitle did the trick! A border did show that the links were under the 'hiding' element. It's one thing to read about these things and another to actually encounter them. Another arrow in my back on my way to becoming proficient. Thanks.