1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

DIV links not working if FF - bu tok in IE

Discussion in 'HTML, Graphics & Programming' started by almichev, 11 Sep 2009.

  1. almichev

    Gangster

    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.
     
  2. Dj_Jestar

    Caporegime

    Joined: 18 Oct 2002

    Posts: 28,994

    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. :)
     
  3. almichev

    Gangster

    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:
     
  4. Dj_Jestar

    Caporegime

    Joined: 18 Oct 2002

    Posts: 28,994

    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>
     
  5. GravyMonster

    Capodecina

    Joined: 18 Oct 2002

    Posts: 14,343

    Location: The land of milk & beans

    Your first link is missing it's double slashes, or is that just because you quickly pasted over the top?
     
  6. almichev

    Gangster

    Joined: 14 Jan 2008

    Posts: 301

    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.
     
  7. Dj_Jestar

    Caporegime

    Joined: 18 Oct 2002

    Posts: 28,994

    Location: Back in East London

    if you remove the style from the divs, does it work?
     
  8. almichev

    Gangster

    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.
     
  9. Mattus

    Capodecina

    Joined: 30 Sep 2003

    Posts: 10,912

    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?
     
  10. SimonCHere

    Wise Guy

    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: 12 Sep 2009
  11. gam3r

    Mobster

    Joined: 20 Jun 2005

    Posts: 3,789

    Location: London..


    This man is right, put all your styling into a CSS, it keeps the HTML nice and neat!
     
  12. almichev

    Gangster

    Joined: 14 Jan 2008

    Posts: 301

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

    Appreciate all the responses :cool: