DIV links not working if FF - bu tok in IE

Associate
Joined
14 Jan 2008
Posts
301
Hi. I have 4 text links arranged horizontally on the page. They work ok in IE, but in Firefox only the 4th link works - the other 3 only show as text. Here is the code:

<DIV style="position: relative; top:10px; left:-260px;"><a href="http:etc etc.jpg"><font size="2"><font color="#6633FF">10 images</font></a></DIV>
<DIV style="position: relative; top:-8px; left:-85px;"><a href="http://etc etc.jpg"><font size="2"><font color="#6633FF">10images</font></a></DIV>
<DIV style="position: relative; top:-26px; left:90px;"><a href="http://etc etc.jpg"><font size="2"><font color="#6633FF">10images</font></a></DIV>
<DIV style="position: relative; top:-44px; left:265px;"><a href="http://etc etc.jpg"><font size="2"><font color="#6633FF">10images</font></a></DIV>

Any help for a rookie would be much appreciated.
 
Caporegime
Joined
18 Oct 2002
Posts
29,490
Location
Back in East London
you've got double opening <font> tags, but only single closing </font> tags. You don't need a new font tag for each attribute, so this:
Code:
<font size="2"><font color="#6633FF">
can become:
Code:
<font size="2" color="#6633FF">

There's lots of room for improvement, such as dropping <font> tags all together, but that'll fix your initial problem. :)
 
Associate
OP
Joined
14 Jan 2008
Posts
301
Thanks Jestar. Unfortunately that hasn't fixed the problem. I've just noticed that the link is on the page in FF as a single invisible line above the text :confused:
 
Caporegime
Joined
18 Oct 2002
Posts
29,490
Location
Back in East London
You sure all quotes match, etc?

Use the layout like this, to make it easier to read:
Code:
<div style="position: relative; top:10px; left:-260px;">
  <font size="2" color="#6633FF">
    <a href="http://etc">10 images</a>
  </font>
</div>
 
Associate
OP
Joined
14 Jan 2008
Posts
301
Your first link is missing it's double slashes, or is that just because you quickly pasted over the top?

Think i pasted over them. The problem is still there. Here is the latest code:

<div style="position: relative; top:10px; left:-260px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">10images</a>
</font>
</div>
<div style="position: relative; top:-8px; left:-85px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">10images</a>
</font>
</div>
<div style="position: relative; top:-26px; left:90px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">10images</a>
</font>
</div>
<div style="position: relative; top:-44px; left:265px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">10images</a>
</font>
</div>

It works ok if there are only 2 links.
 
Associate
OP
Joined
14 Jan 2008
Posts
301
The links work without Style, but the position code doesn't. In FF they're in a row horizontally without spacing, in IE they're positioned vertically.
 
Soldato
Joined
30 Sep 2003
Posts
10,916
Location
London
I'd just start again. Font tags are deprecated and old hat, so it's not the kind of thing you want to be learning if you're new to making websites. You're better off putting the font information in the CSS rules you're applying to the DIV:

Code:
font-size: 10px; color: #6633ff

I have a feeling you have a problem with the positioning as well. What are those positions relative to? Can we see some more code?
 
Associate
Joined
24 Jun 2008
Posts
1,168
I've just stuck an extra div around the tags to push them into the centre of the page and they both (ie and FF) display 4 links next to each other with spaces.

I think the reason you're seeing 2 is that the other 2 are off the side of the page!

Code:
<html>
<body>
<div style="position:relative; top:100px; left:300px;">
<div style="position: relative; top:10px; left:-260px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">10images</a>
</font>
</div>
<div style="position: relative; top:-8px; left:-85px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">11images</a>
</font>
</div>
<div style="position: relative; top:-26px; left:90px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">12images</a>
</font>
</div>
<div style="position: relative; top:-44px; left:265px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">13images</a>
</font>
</div>
</div>
</body>
</html>

oh and top -8, -26 and -44 should put them all on one line and divs act like new lines on the content flow.

simon
 
Last edited:
Soldato
Joined
20 Jun 2005
Posts
3,824
Location
London..
I'd just start again. Font tags are deprecated and old hat, so it's not the kind of thing you want to be learning if you're new to making websites. You're better off putting the font information in the CSS rules you're applying to the DIV:

Code:
font-size: 10px; color: #6633ff

I have a feeling you have a problem with the positioning as well. What are those positions relative to? Can we see some more code?


This man is right, put all your styling into a CSS, it keeps the HTML nice and neat!
 
Associate
OP
Joined
14 Jan 2008
Posts
301
I've just stuck an extra div around the tags to push them into the centre of the page and they both (ie and FF) display 4 links next to each other with spaces.

I think the reason you're seeing 2 is that the other 2 are off the side of the page!

Code:
<html>
<body>
<div style="position:relative; top:100px; left:300px;">
<div style="position: relative; top:10px; left:-260px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">10images</a>
</font>
</div>
<div style="position: relative; top:-8px; left:-85px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">11images</a>
</font>
</div>
<div style="position: relative; top:-26px; left:90px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">12images</a>
</font>
</div>
<div style="position: relative; top:-44px; left:265px;">
<font size="2" color="#6633FF">
<a href="http://etc.jpg">13images</a>
</font>
</div>
</div>
</body>
</html>

oh and top -8, -26 and -44 should put them all on one line and divs act like new lines on the content flow.

simon

Thanks will give it a try and also look into CSS.

Appreciate all the responses :cool:
 
Back
Top Bottom