/    Sign up×
Community /Pin to ProfileBookmark

CSS Borders – Browser Dependent?

Copy linkTweet thisAlerts:
Apr 04.2009

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

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangApr 04.2009 — To obtain consistent layout across browsers use a valid DTD

If that doesn't help, we will need to see the site
Copy linkTweet thisAlerts:
@hefterrauthorApr 04.2009 — 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>
Copy linkTweet thisAlerts:
@FangApr 04.2009 — Looks OK, how are you adding the borders?
Copy linkTweet thisAlerts:
@dmboydApr 04.2009 — 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 [url=http://hsivonen.iki.fi/doctype/#handling]the appendix of Henry Sivonen's "Activating Browser Modes with Doctype"[/url]. I highly recommend checking it out. You can find a similar table in [url=http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types]Section 1.1 of the "Quirks mode" entry at Wikipedia[/url], though Wikipedia cites Sivonen's article as the source.
Copy linkTweet thisAlerts:
@hefterrauthorApr 05.2009 — 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
Copy linkTweet thisAlerts:
@hefterrauthorApr 05.2009 — I took out the DTD altogether and the boders now work OK across all major browsers!!

What does this all mean?

hefterr
×

Success!

Help @hefterr spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...