/    Sign up×
Community /Pin to ProfileBookmark

Okay, am I the problem, or is it IE?

I am trying to get a handle on the CSS positioning stuff, but when I get it set up perfectly for firefox, IE looks terible, and when I fix it for IE, firefox looks terible. Is there any way to do what I want and have it look the same in both browsers? Or am I going to have to cater to one over the other?

The place I am doing it at is [url]http://www.wilsweb.net[/url] on the main page. There will be a footer spanning the bottom, but I haven’t put it in yet. It is currently set up for IE. The code is below.

The css:

[code]
body
{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: #000000
}
#container
{
position: absolute:
top: 0px;
left: 0px;
width: 100%
}
#header
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
background-color: #04C6B6
}
#left_nav
{
position: relative;
top: 15px;
left: 0px;
height: 500px;
width: 20%;
background-color: #04C6B6;
text-align: center
}
#content
{
position: relative;
top: -485px;
left: 21%;
height: 500px;
width: 79%;
background-color: #04C6B6;
text-align: center;
font-weight: bold
}
p
{
margin-top: 5px;
margin-left: 5px;
margin-right: 5px
}
h1
{
font-family: Times
}
[/code]

The html file:

[code]
<?xml version=”1.0″ encoding=”UTF-8″?>
<!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>
<title>Wil’s Web.net</title>
<link rel=”stylesheet” type=”text/css”
href=”./css/Main.css” />
</head>

<body>

<div id=”container”>

<div id=”header”>
<img src=”./Images/Wils_Web_Logo1.jpg” alt=”Wils Web.Net!”/>
</div>

<div id=”left_nav”>
<br />
<p class=”nav”>Test. Test. Test.</p>

<p class=”nav”>Test. Test. Test. Test. Test.
Test. Test. Test. Test. Test.
Test. Test. Test. Test. Test.</p>
</div>

<div id=”content”>
<h1>Under Construction</h1>
<br />
<br />
This website is currently under construction. Please return at a later time
to see the finished product.
<br />
<br />
<a href=”/Images/pics/”>Click here</a> if your looking for the pictures I have up so far.
</div>

</div>

</body>
</html>
[/code]

Please help with this. I’ve been at this for awhile now, and it’s starting to drive me nuts!………….Lan

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@drhowarddrfineDec 24.2005 — First, you need to get rid of the xml prologue. Only modern browsers know what to do with it while IE goes into 'quirks' mode.

Under #container you have a colon instead of a semicolon after absolute

IE is screwing you up with your margins. You may want to put a margin:0 for h1. Or, better yet, put it in the body and set your margins in the individual divs to keep IE in line with everyone else.
Copy linkTweet thisAlerts:
@LanauthorDec 24.2005 — Thanks for your help. I didn't know that the H1 tag came with it's own margins and was effecting the layout. I have figured things out the way I want to. Thanks again!.........Lan
Copy linkTweet thisAlerts:
@ray326Dec 26.2005 — Every element comes with a default set of attributes. Wyke-Smith goes into that in detail in parts of his book.
×

Success!

Help @Lan 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...