SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Calderdale, West Yorkshire, UK
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Netscape/Explorer incompatibility displaying boxes

    Hi people!

    I wonder if anyone can help me with a Netscape/Explorer compatibility problem. I'm using Netscape 4.77 and Explorer 5 on a Mac, and BBEdit to create the HTML and CSS.

    What I want is a string of text (which is actually a series of hyperlinks) on a coloured background, surrounded by a border. The box is to be horizontally centred on the page, and should be sized to fit the text (whatever size it's set to in the browser preferences).

    My code works fine in Netscape, but in Explorer, the box is the width of the page, and it has nasty white space under the text.

    Everything I try which makes it work in one browser seems to stop it working in the other!

    I say it works fine in Netscape, but is there any way of getting rid of the annoying space it puts between the coloured background and the border? (Explorer doesn't do this).

    I could use a table, but I still get the white space in Explorer, and also I don't want that sort of border, just a plain black line.

    This is my code:


    HTML file:

    <div class="links">

    <p>
    <a href="link_1.html">link&nbsp;1</a>&nbsp;| <a href="link_2.html">link&nbsp;2</a>&nbsp;|
    <a href="link3_.html">link&nbsp;3</a>&nbsp;| <a href="link_4.html">link&nbsp;4</a>&nbsp;|
    <a href="link_5.html">link&nbsp;5</a>&nbsp;| <a href="link_6.html">link&nbsp;6</a>&nbsp;
    </p>

    </div>


    CSS file:

    div.links { border: solid; border-width: thin; background: aqua); padding: 0.5em; text-align: center; }

    Many thanks in advance for your help.

    Polarity

  2. #2
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like you accidentally put a ) right after aqua. Try taking that out and see if it helps.

  3. #3
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Calderdale, West Yorkshire, UK
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Quinn

    the "(" was a hangover from an rgb colour. Taking it out didn't make any difference.

  4. #4
    SitePoint Wizard
    Join Date
    Jul 1999
    Location
    Chicago
    Posts
    2,629
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, OK. I have done what you're doing quite a bit and here is what works for me.

    Code:
    __HTML__
    <div id="nav">
    <a href="link">Link1</a> <a href="link">Link2</a>
    </div>
    
    __CSS__
    #nav a {
      padding: 5px;
      background-color: aqua;
      border: solid 1px black;
    }
    I have noticed that IE does not do well with borders around text. It often doesn't render the top and bottom borders. The only workaround that I know of is to not use any borders.

    So...good luck.

  5. #5
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Calderdale, West Yorkshire, UK
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but the code you posted seems to be invisible!

  6. #6
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Calderdale, West Yorkshire, UK
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried what you suggested, but what I got was separate boxes for each link. This would be okay, but in Netscape they are aligned vertically, and in Explorer, horizontally!

  7. #7
    SitePoint Addict psychedelic's Avatar
    Join Date
    Feb 2002
    Location
    Boston
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is what i did:

    Code:
    <html>
    <head>
    <style type="text/css">
    
    .links { 
    	border: solid; 
    	border-width: thin; 
    	background: aqua;
    	padding: 0.5em; 
    	text-align: center;
    	width: 600px
    }
    </style>
    </head>
    <body>
    <p class="links" align="center">
    <a href="link_1.html">link 1</a> | <a href="link_2.html">link 2</a> | 
    <a href="link3_.html">link 3</a> | <a href="link_4.html">link 4</a> | 
    <a href="link_5.html">link 5</a> | <a href="link_6.html">link 6</a>  
    </p> 
    </body>
    </html>
    It works but it's aligned to the left. If you do your CSS like that it's easier to read. I put "width" to make it certain width and not go everywhere, but it's not centered. =/
    The Internet is prettier on a Mac.

  8. #8
    SitePoint Member
    Join Date
    Jul 2002
    Location
    Calderdale, West Yorkshire, UK
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi Psychedelic

    thanks for the code. I see what you mean. If I take out the "width", it looks exactly as I want it to in Netscape (4.7), but in IE it is the width of the window.

    It's a game, isn't it!!!

    Polarity

  9. #9
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    edit: ok it didn't work
    Last edited by Trav; Aug 9, 2002 at 22:50.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •