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.
This is what I'm talking about! (<!-- m --><a class="postlink" href="http://www.lettonica.info/test/">http://www.lettonica.info/test/</a><!-- m -->)
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?
*geez* Whenever I post to this board the solution pops up in my mind a few minutes later... 
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.
Originally posted by philaweb
Well, I've found a solution to most of the questions above, just not as to why the corners looks daft in IE6.
You're suffering from the Internet Explorer 3 pixel margin float bug. (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->)
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.Originally posted by toicontien
You're suffering from the Internet Explorer 3 pixel margin float bug. (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->)
toicontien 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.
Here is the XHTML version with external stylesheets (<!-- m --><a class="postlink" href="http://www.39594.dk">http://www.39594.dk</a><!-- m -->)
I haven't changed anything within the code besides the above described changes.
Go figure!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.
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.
This is what I'm talking about! (<!-- m --><a class="postlink" href="http://www.lettonica.info/test/">http://www.lettonica.info/test/</a><!-- m -->)
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?
*geez* Whenever I post to this board the solution pops up in my mind a few minutes later... 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.
Originally posted by philaweb Well, I've found a solution to most of the questions above, just not as to why the corners looks daft in IE6.
You're suffering from the Internet Explorer 3 pixel margin float bug. (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->)
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.Originally posted by toicontien
You're suffering from the Internet Explorer 3 pixel margin float bug. (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/explorer/threepxtest.html">http://www.positioniseverything.net/exp ... xtest.html</a><!-- m -->)
toicontien 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.
Here is the XHTML version with external stylesheets (<!-- m --><a class="postlink" href="http://www.39594.dk">http://www.39594.dk</a><!-- m -->)
I haven't changed anything within the code besides the above described changes.
Go figure!
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.