/    Sign up×
Community /Pin to ProfileBookmark

Floating Columns Nightmare

Copy linkTweet thisAlerts:
Nov 12.2004

Aaargh! 😡

After fighting with a template for more than an hour I’m almost throwing in the towel….

I’m trying to create a two-column layout with header and footer, which in theory should be quite easy, but I need to have the text content of the columns with a rounded corners design.

[URL=http://www.lettonica.info/test/]This is what I’m talking about![/URL]

What makes me mad is the fact that this layout looks different in all three browsers I use for checking (IE6, Firefox 0.8 and Opera 7.54).

The problems are:

How can the upper left round corner image be so out of whack in IE6 and Opera?

How do I get the same padding between the two columns and the column widths to show on screen?

How do I get the right border to be in line with the top and bottom image (just like the left border)?

Can anyone tell me how to solve this? ?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@philawebauthorNov 12.2004 — *geez* Whenever I post to this board the solution pops up in my mind a few minutes later... :p

Well, I've found a solution to most of the questions above, just not as to why the corners looks daft in IE6.

Hmm, some more thinking coming up...

Sorry to have bothered y'all. ?
Copy linkTweet thisAlerts:
@toicontienNov 12.2004 — [i]Originally posted by philaweb [/i]

[B]Well, I've found a solution to most of the questions above, just not as to why the corners looks daft in IE6.[/B][/QUOTE]
You're suffering from the [url=http://www.positioniseverything.net/explorer/threepxtest.html]Internet Explorer 3 pixel margin float bug.[/url]

In short, don't float the images. In fact, since your layout is a fixed width in pixels, make the corner graphics a part of the background graphics, then add enough DIV tags to allow for the additional background graphics.
Copy linkTweet thisAlerts:
@philawebauthorNov 13.2004 — [i]Originally posted by toicontien [/i]

[B]You're suffering from the [url=http://www.positioniseverything.net/explorer/threepxtest.html]Internet Explorer 3 pixel margin float bug.[/url][/B][/QUOTE]

[B]toicontien[/B] Thanks for the heads up!

I was testing that rounded corner design on another server, since the server hosting the domain for which the design is intended was down some hours.

I also used a HTML document where all of the style attributes were listed at the top of the document. This makes it easier and faster to edit the attributes.

Funny thing though. When I changed the encoding from HTML to XHTML, the style attributes from being within the document to an external CSS file - guess what? The IE bug doesn't show.

[URL=http://www.39594.dk]Here is the XHTML version with external stylesheets[/URL]

I haven't changed anything within the code besides the above described changes.

Go figure! ?
Copy linkTweet thisAlerts:
@toicontienNov 14.2004 — That all depends on whether you had a full doctype in your previous version. Having a full doctype makes modern browsers render pages in Standards Mode. If you didn't have a doctype, IE was rendering your page in Quirks Mode, where it basically renders pages like 4.0 browsers.
×

Success!

Help @philaweb 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.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

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