www.webdeveloper.com
Results 1 to 7 of 7

Thread: CSS Borders - Browser Dependent?

  1. #1
    Join Date
    Mar 2009
    Posts
    74

    CSS Borders - Browser Dependent?

    Hi
    I am a newbie so please be patient with me.

    I have a CSS browser dependent issue that most experienced CSS gurus should know how to solve (I hope).

    I am developing web pages using primarily HTML table structures and CSS styles for the table elements.

    Most of the page designs have a rectangular table structure with left/right borders that meet a graphic on the top (eg tabs).

    When I use CSS left/right borders, I have noticed that MSIE and Safari place the borders INSIDE the container defined by the table. Firefox seems to place the CSS borders on the OUTSIDE of the container. As I need these borders to exactly align with the left and right edges of a graphic on top of the container, this can never be done correctly for all 3 major browsers?

    I have gotten around this by using a background graphic of the left and right borders and y-repeated them as this seems more stable between all browsers.

    Is there a trick I need to know for this design structure as I'd prefer to use CSS borders for performance and clarity.

    Thanks in advance,
    hefterr

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    To obtain consistent layout across browsers use a valid DTD
    If that doesn't help, we will need to see the site
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Mar 2009
    Posts
    74

    DTD Used

    Hi,
    Thanks for the response. I am using :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>General Information</title>
    <link href="styles/styles.css" rel="stylesheet" type="text/css" />
    </head>
    Last edited by WebJoel; 04-04-2009 at 04:03 PM. Reason: sp

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Looks OK, how are you adding the borders?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Mar 2009
    Posts
    96
    It could also be the fact that most browsers use an "almost standards" mode for Transitional and Frameset DTDs. That's supposed to only apply to tables though... Still, I use Strict DTDs when possible. Also, the only way you could be viewing it in IE is if it is served as text/html, which means it is treated as HTML rather than XHTML. You can find a table comparing the various DTDs to the different rendering modes in the appendix of Henry Sivonen's "Activating Browser Modes with Doctype". I highly recommend checking it out. You can find a similar table in Section 1.1 of the "Quirks mode" entry at Wikipedia, though Wikipedia cites Sivonen's article as the source.

  6. #6
    Join Date
    Mar 2009
    Posts
    74

    Table borders between browsers

    Hi
    I am a newbie so please be patient with me.

    I have a CSS browser dependent issue that most experienced CSS gurus should know how to solve (I hope).

    I am developing web pages using primarily HTML table structures and CSS styles for the table elements.

    Most of the page designs have a rectangular table structure with left/right borders that meet a graphic on the top (eg tabs).

    When I use CSS left/right borders, I have noticed that MSIE and Safari place the borders INSIDE the container defined by the table. Firefox seems to place the CSS borders on the OUTSIDE of the container. As I need these borders to exactly align with the left and right edges of a graphic on top of the container, this can never be done correctly for all 3 major browsers?

    I have gotten around this by using a background graphic of the left and right borders and y-repeated them as this seems more stable between all browsers.

    Is there a trick I need to know for this design structure as I'd prefer to use CSS borders for performance and clarity.

    Thanks in advance,
    hefterr

  7. #7
    Join Date
    Mar 2009
    Posts
    74
    I took out the DTD altogether and the boders now work OK across all major browsers!!

    What does this all mean?

    hefterr

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles