/    Sign up×
Community /Pin to ProfileBookmark

CSS incompatibilities

Copy linkTweet thisAlerts:
Feb 04.2006

Hi.

Im trying to make a cross-browser (IE, Opera, FF) compatible webpage.
Im having a problem with the main content section in my page however.

Im trying to use only CSS i.e. no tables but I get the following problems:

1) If I float the main content section to the right (shown [URL=http://83.245.92.158/test1.php]here[/URL] [test1.php] ) then it displays correctly in IE but is shifted way too much to the right in FF and Opera.

2) If, however, I change the margin-left of the main content section to 190px or beyond it displays correctly in all three browsers but in IE the first few lines are always indented by a few spaces (which I believe is due to the floating div on the left of it). see [URL=http://83.245.92.158/test2.php]here[/URL]

I would preferably like to use something like IE displays on 1) above.

Thanks for any help you can provide.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@drhowarddrfineFeb 04.2006 — The problem is IE. You are using the xml prologue and IE doesn't know what to do with it so it goes into quirks mode. Only modern browsers can handle xhtml so delete that first line.

Now, take the hint from the fact that your code works in old, buggy non-standard IE but not in any of the other modern browsers. Never, ever design using IE until after you get your code working properly and tested in the modern browsers. And that includes buggy, non-standard IE7.
Copy linkTweet thisAlerts:
@tabzterauthorFeb 04.2006 — The problem is IE. You are using the xml prologue and IE doesn't know what to do with it so it goes into quirks mode. Only modern browsers can handle xhtml so delete that first line.

Now, take the hint from the fact that your code works in old, buggy non-standard IE but not in any of the other modern browsers. Never, ever design using IE until after you get your code working properly and tested in the modern browsers. And that includes buggy, non-standard IE7.[/QUOTE]

Ive taken out the <?xml ...?> prologue but still IE indents the first few lines.

Yess I do code for the modern browsers but would like IE to be included because even though I too despise IE, the fact remains, most people who dont know the intracacies of web development use IE as it comes standard on their machines. This is who the website will be for which is why i need IE compatibility.

PS. im using

<?php

header("Content-type: text/html");

?>

as the first line in my code Ive tried changing to

<?php

header("Content-type: application/xhtml + xml");

?>

to no avail aswell. does that make a difference?
Copy linkTweet thisAlerts:
@drhowarddrfineFeb 04.2006 — would like IE to be included[/QUOTE] I didn't say not to include IE. I'm saying if you code to IE first then you are going to have problems. You have to make it work in FF first, then adjust for IEs quirks and bugs, but get the code right first.
Copy linkTweet thisAlerts:
@drhowarddrfineFeb 04.2006 — IE is screwing you up and not floating like it should. Set a width for the div and then it will work. As usual, FF is displaying this correctly.
Copy linkTweet thisAlerts:
@tabzterauthorFeb 04.2006 — Thanks alot drhowarddrfine - setting the div width worked but obviously not my intention to make it fixed width.

I dont know if you might know any mini-hack to make me avoid using a specific width?

coz it looks like if you dont know - no-one will. ur a genious.
Copy linkTweet thisAlerts:
@tabzterauthorFeb 04.2006 — well Ive done something that makes the indentations go away. It will be a headache for multiple pages.

If you wanna see it go to the 2nd link, above and view source and read comment
×

Success!

Help @tabzter 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.6,
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,
)...