1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

links don't work with divs?

         

ckaiser

10:02 pm on Jul 8, 2010 (gmt 0)

10+ Year Member



Hi all. New here. Relatively clueless with complex site stuff so please go easy on me. :-)

I'm building a site for a client. I'm working on a page with a background image that resizes as the browser window changes. Got that part OK.

Now I need a set of nav links on the right side and a ~80% opacity event calendar in the middle. The box needs to maintain its space relative to the background image as the browser resizes.

I've tried a wide variety of techniques but keep running into one wall. When I get everything laid out, it looks fine in IE7, but the nav links go away in FF 3.6.6. The're still there, but they are no longer active links (no mouse pointer change on mouseover, no action on click) Can anyone tell what is causing this? Here's the code:

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

<style type="text/css">
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } img { border: 0; } img#back { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; } div#content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
body {
font: normal 100%/1.5 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
}
img {
max-width: 100%;
}
</style><!--[if IE]><style type="text/css">
img,
p {
width: 100%;
}
img {
-ms-interpolation-mode: bicubic;
}
</style><![endif]-->
</head>
<body>
<img src="./images/lo-res/AgainstWall_BW4.jpg">
<div id="content">
<div style=";text-align: right;"></div>
<h1 style="text-align: right;"><br>
</h1>
<h1 style="text-align: right;"><br>
</h1>
<h1 style="text-align: right;"><a href="Index.html"><img style="border: 0px solid ; width: 116px; height: 58px;" alt="" src="Images/Lo-Res/Home2.gif"></a><br><a href="News.html"><img style="border: 0px solid ; width: 132px; height: 57px;" alt="" src="Images/Lo-Res/News2.gif"></a><br><a href="Bio.html"><img style="border: 0px solid ; width: 84px; height: 63px;" alt="" src="Images/Lo-Res/Bio2.gif"></a><br><a href="Gigs.html"><img style="border: 0px solid ; width: 116px; height: 71px;" alt="" src="Images/Lo-Res/Gigs2.gif"></a><br><a href="Audio.html"><img style="border: 0px solid ; width: 125px; height: 59px;" alt="" src="Images/Lo-Res/Audio2.gif"></a><br><a href="Video.html"><img style="border: 0px solid ; width: 122px; height: 62px;" alt="" src="Images/Lo-Res/Video2.gif"></a><br></h1>

<p style="text-align: right;"><br>
</p><br></div>

<div id="content"><br>
<div style="border: 1px solid red; background-image: url(Images/Lo-Res/Grey40.gif); height: 300px; width: 400px; margin-left: 200px; margin-top: 300px; opacity: 0.8; filter:alpha(opacity=80);">
<p>Calendar entry 1
<p>Calendar entry 2
<p>Calendar entry 3
<p>Calendar entry 4

</div>
</body></html>

***********

I've put most of the code for the page in there because frankly, I don't know what specifically is causing the issue and don't want to leave out something relevant.

I appreciate any help you folks can provide. Thanks!
Charlie

birdbrain

9:07 am on Jul 9, 2010 (gmt 0)



Hi there ckaiser,

and a warm welcome to these forums. ;)

Ignoring the fact that your coding is extremely poor, the solution to your problem is to add this rule... 


a {
position:relative;
z-index:1;
}

...to your style sheet.

birdbrain

ckaiser

1:56 pm on Jul 9, 2010 (gmt 0)

10+ Year Member



Hi BB. Thanks for your reply. I had tried using the z-index with no success previously but it appears to work when done this way.
I think I had not applied it to the A tags. I'd tried it with different divs with no success.
I've tried using a bunch of different methods to make this whole thing work. This was the simplest code that seemed to work.
I tried using different divs with a container and the background picture in the container instead of in the body but I couldn't get the other divs on top of the picture. Perhaps I'll try one of those again...

I would love a critique of my coding; I haven't built a webpage since before CSS existed, so I am looking for any and all recommendations.

If you can suggest a more elegant way to do this, I'd love to see it. I'd like to build decent stuff if possible.

Thanks again!

Charlie

Fotiman

2:38 pm on Jul 9, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hi ckaiser, and welcome to WebmasterWorld!
You seem eager to learn and improve... always a good thing. Just wanted to give you some feedback on your code.

1. I see you are using a strict DOCTYPE. Nice. You're already on the right track.

2. Ideally, you should try to keep all of your CSS in a separate file and link it in using <link rel="stylesheet" type="text/css" href="yourfile.css">. You should try to maintain a separation of the "content" layer (your markup) and the "presentation" layer (the CSS), which means avoid using inline CSS (style attributes on elements, etc.). That way when you need to change the presentation of your page, ideally you only need to modify a CSS file (rather than dig through a bunch of content).

3. Your CSS code could be better formatted. Rather than putting a bunch of style definitions on one line, format them like this: 

selector1,
...
selectorN {
  rule1: value1;
  ...
  ruleN: valueN;
}


for example: 

html, 
body { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 100%; 
}


4. Be sure to validate both your HTML [validator.w3.org] and CSS [jigsaw.w3.org].

5. You have a lot of odd markup that's just empty elements. I can't tell if you're using this for some sort of presentation effect to position things on the page differently, or if you've simply omitted the value for this post to keep the code example slimmer. Here's an example:

<h1 style="text-align: right;"><br>
</h1>

If you're doing that for presentation only (and <br> is generally considered to be presentational only), then you probably should be eliminating these empty elements and using CSS to apply the desired presentation effects to other elements. Also, as pointed out earlier, avoid inline styles.

6. You have multiple <h1> elements. Typically, a page will have only 1 <h1> element, being the top level heading for the page.

7. You have multiple elements with the same id "content". id values must be unique. You may encounter cross browser issues when you re-use an id value.

8. You have omitted the closing tags on some of your <p> elements. While they are indeed optional, it's best to always include closing tags on all elements (except for those that don't have a closing tag, like <img>, <hr>, <br>, etc.).

Also, make sure you're using the correct semantic markup for each item. For example, is a "Calendar entry" really a paragraph? (and again, this also applies to all those empty <h1> elements).

I hope this helps, and I hope you continue to ask questions here in the forums. :)

londrum

3:00 pm on Jul 9, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



i reckon this is your problem: you've got a div overlapping the links. so when you mouse over them you are not actually mousing over the links at all, but the div on top. that's why its not registering with the mouse.

i came up against this problem when i started positioning stuff too. and because the div is invisible, its pretty hard to find the fault until someone points it out.

this is how you fix it: give the divs a bold background colour so you can see exactly where they are.
something like this: 
background:#red !important


when you find the right div, just move it so its no longer overlapping the links.

[edit: its the content div. you've got it absolutely position at top:0, above where the header starts. move it down so it starts below the header, top:300px, or whatever. if you want the background image to cover the whole page, then put it on the <body> or <html> tag instead... which will be behind the header.]

ckaiser

3:06 am on Jul 10, 2010 (gmt 0)

10+ Year Member



OK. Wow. That's a bunch of great info, and based on it, I've done some cleanup.

Londrum; I found a neat tool in FF called Firebug that lets you see where your elements are. But I'll keep your method in mind, too.

Fotiman; I've gone through a bunch of your steps and have gotten it to this point. Everything is working, except that somehow in the process, the background image no longer covers the entire browser window; it's like a margin ended up around it, but I can't see it in the style sheet. Any thoughts? I'd really like to get rid of that... I'm guessing it has to do with the 100%s and nested stuff, but that's strictly a guess.

I also don't understand everything in the style sheet. A lot of what I did was copy/paste from some tutorial code, then add to it. Sometimes taking things out has broken stuff. LOL...

For example, the font info is in the top body section, and in a second one farther down. If I try to take out the second one, the text doesn't pick up the formatting. I can't figure out why.
On the "a" section, does that apply to all the a href tags? Is there a more elegant way to do that? I assume if I have other ones on the page somewhere it will do the same thing to them. Might be undesirable?
Also, what's the significance of the "html," before the body tag?


OK. Here's the style sheet:

*****
<style type="text/css">
html,
body
{
margin: 0;
width: 100%;
height: 100%;
border:0;
font: normal 100%/1.5 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
}

img#back
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}

div#content
{
position: absolute;
top: 0;
left: 0;
border: 1px solid red;
background-image: url(Images/Lo-Res/Grey40.gif);
height: 300px;
width: 400px;
margin-left: 200px;
margin-top: 300px;
opacity: 0.8; filter:alpha(opacity=80);
}

div#nav
{
position: absolute;
top: 150px;
right: 0;
width: 150px;
height: 100%;
text-align:right;
}

body
{
font: normal 100%/1.5 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
}

img
{
max-width: 100%;
}

a
{
position:relative;
z-index:1;
}

</style>
<!--[if IE]><style type="text/css">

img
{

width: 100%;

-ms-interpolation-mode: bicubic;

}


</style>
<![endif]-->
******

And here's the code:
******
<!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">
<title>The Jeff Evers Band</title>

<link rel="stylesheet" type="text/css" href="Style3.css">

</head>

<body>
<img src="./images/lo-res/AgainstWall_BW4.jpg">

<div id="content">

<br>Calendar entry 1
<br>Calendar entry 2
<br>Calendar entry 3
<br>Calendar entry 4

</div>

<div id="nav">

<a href="Index.html"><img style="border: 0px solid ; width: 116px; height: 58px;" alt="" src="Images/Lo-Res/Home2.gif"></a>
<br>
<a href="News.html"><img style="border: 0px solid ; width: 132px; height: 57px;" alt="" src="Images/Lo-Res/News2.gif"></a>
<br>
<a href="Bio.html"><img style="border: 0px solid ; width: 84px; height: 63px;" alt="" src="Images/Lo-Res/Bio2.gif"></a>
<br>
<a href="Gigs.html"><img style="border: 0px solid ; width: 116px; height: 71px;" alt="" src="Images/Lo-Res/Gigs2.gif"></a>
<br>
<a href="Audio.html"><img style="border: 0px solid ; width: 125px; height: 59px;" alt="" src="Images/Lo-Res/Audio2.gif"></a>
<br>
<a href="Video.html"><img style="border: 0px solid ; width: 122px; height: 62px;" alt="" src="Images/Lo-Res/Video2.gif"></a>
<br>

</div>

</body>
</html>

*******
Looks like none of my nice code section indenting came through on the copy/paste. Oh well. It's there. Really...:-)

Thanks again, folks. I've learned a tremendous amount so far!

Charlie

dreamcatcher

3:19 pm on Jul 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Great news Charlie and a warm welcome from me too. :)

Everyone has to start at the beginning, remember that. I don`t envy anyone wanting to get into web design, there is too much to try and learn these days. Bulding CSS sites can be fun, but frustrating, like anything else. Many tutorials online are out of date now, but how do you know?

Its all a learning curve my friend. :)

dc

Fotiman

4:26 pm on Jul 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



it's like a margin ended up around it, but I can't see it in the style sheet.

Close. It's not a margin, it's padding. Add this rule to your html, body styles:

padding: 0;

what's the significance of the "html," before the body tag?

From a document point of view, html is the root element. By doing this:

html,
body {
margin: 0;
padding: 0;
}

You're ensuring that the browser doesn't apply margins or padding to either of those elements.

Note, you have an HTML conditional comment inside your stylesheet. That won't work. Conditional comments need to be in the HTML only.

Also, you have several style selectors like this:
div#content
div#nav

It's important to note that since the id's must be unique, adding an element to the selector only makes it less efficient for the browser. You could have written those simply as:
#content
#nav

Fotiman

4:28 pm on Jul 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Oh, also, in your external style sheet, you don't include the <style> wrapper. That's probably causing some problems and might be why your first rules are not being applied. Remove that HTML code from your CSS and give it another try. :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026