tricky layout works in Firefox, Safari – not IE

@lisan28Jul 16.2009

Hello everybody! First of all I validated my HTML and CSS, no issues there. The page works perfectly fine in Firefox and Safari, but has some quirks in IE. If you look at the following link in IE:

~~[URL=”http://www.lisa-noble.com/test/redo.html”]~~http://www.lisa-noble.com/test/redo.html[/URL]

You will notice that the background image is not tiling all the way along the bottom of the screen. Also the content is a bit displaced upwards. Here is what I was trying to accomplish:

-have a fluid layout that would expand and contract to fit different resolutions or if somebody resizes their browser window
-have that frame always present around the edge of the screen and fixed in place
-content will scroll within the frame, rather than the frame expanding vertically to accommodate content.

I also tried this but it came out even worse, heh:
~~[URL=”http://www.lisa-noble.com/test/redo3.html”]~~http://www.lisa-noble.com/test/redo3.html[/URL]

Eternal gratitude to anyone with suggestions. ?

to post a comment

CSS

5 Comments(s) _↴

@lisan28authorJul 16.2009 — #Oh and I forgot to mention that the css for the first layout can be seen here:

http://www.lisa-noble.com/test/redo.css

@lisan28authorJul 19.2009 — #Background info:

- I have validated the page and CSS, no problems there

- Site is working properly in Firefox and IE, seems to be a margin issue in Safari

-This margin issue is not the common Safari bug with a negative margin being applied to a floated element

-I am using Safari in a windows environment, I do not have a Mac

The problem:

-in Safari the top margin on the content either is either not being applied at all or is being interpreted differently

-it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari?

The links and pertinent code:

http://www.lisa-noble.com/test/redo.html

HTML

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html>
 <head>
 <title>Site Test</title>
 <link rel="stylesheet" type="text/css" href="redo.css" />
 <!--[if IE]>
 <link rel="stylesheet" type="text/css" href="iespecific.css" />
 <![endif]-->
 </head>
 
 <body>
 
 <div id="top_filler">
 </div>
 
 <div id="left_filler">
 </div>
 
 <div id="right_filler">
 </div>
 
 <div id="top_left">
 </div>
 
 <div id="header">
 </div>
 
 <div id="top_right">
 </div>
 
 <div id="content">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
 <p>Etc, etc, etc....</p>
 </div>
 
 <div id="bottom_filler">
 </div>
 
 <div id="bottom_left">
 </div>
 
 <div id="bottom_right">
 </div>
 
 </body>
 </html>[/CODE]

The CSS:

[CODE]* {
 margin: 0;
 padding: 0;
 }
 
 body {
 background: #fdd9e9;
 }
 
 div#top_filler {
 background: url(images/bg_slice_sm.png) repeat-x;
 width: 100%;
 height: 164px;
 position: fixed;
 top: 0px;
 z-index: 5;
 }
 
 div#left_filler {
 background: url(images/left_slice_sm.png) repeat-y;
 width: 174px;
 height: 100%;
 position:fixed;
 left:0px;
 z-index: 5;
 
 }
 
 div#right_filler {
 background: url(images/right_slice_sm.png) repeat-y;
 width: 161px;
 height: 100%;
 position:fixed;
 right: 0px;
 z-index:5;
 }
 
 div#bottom_filler {
 background: url(images/bottom_slice_sm.png) repeat-x;
 width: 100%;
 height: 76px;
 position: fixed;
 bottom: 0px;
 z-index: 5;
 }
 
 div#header {
 position: fixed;
 top: 0px;
 left: 37%;
 height: 125px;
 width: 316px;
 margin: 0 auto;
 background: url(pink_logo2.png) no-repeat;
 z-index: 25;
 }
 
 ul.NoBulletNoIndent {
 list-style-type: none;
 margin-left: 0px;
 padding-left: 0px
 }
 
 div#top_left {
 height: 314px;
 width: 221px;
 background: url(images/left_top_corner_sm.png) no-repeat;
 position: fixed;
 top: 0px;
 left: 0px;
 z-index: 5;
 }
 
 div#bottom_left {
 height: 175px;
 width: 176px;
 background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
 position: fixed;
 bottom: 0px;
 left: 0px;
 z-index: 5;
 
 }
 
 div#top_right{
 height:174px;
 width:174px;
 background: url(images/right_top_corner_sm.png) top no-repeat;
 position: fixed;
 top:0px;
 right: 0px;
 z-index:5
 }
 
 div#bottom_right{
 height: 602px;
 width:198px;
 background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
 position: fixed;
 bottom: 0px;
 right: 0px;
 z-index: 5
 }
 
 div#content {
 margin: 40px 164px 0px 180px;
 position: relative;
 z-index: 1;
 }[/CODE]

I'm fairly certain that the issue is with the content area. But I'm relatively inexperienced at this.

@Andyram2kJul 19.2009 — #Hi Lisan28,

One thing to try, would be to replace your content styles with:

DIV#content {

Z-INDEX: 1; POSITION: relative; MARGIN: 170px 164px 76px 180px

}

/* IE Only */

* html DIV#content {

MARGIN: 80px 164px 76px 180px

}

For IE content, you would change the margins on the bottom style, and all other browsers (safari / firefox etc) would use the one above. This means that you can specify varying margins/padding etc for just IE in the same way as above, and you remove the need for a separate stylesheet.

Let me know if this helps at all. Cheers.

- Andy.

@lisan28authorJul 19.2009 — #Hi Andy,

Yes I had already solved the IE problem by specifying IE specific style rules and was just having trouble with Safari at that point. However, I can't explain why, but when I turned it into a Joomla template it worked fine. I can't explain it, but I'm not complaining either!

~Lisa~

@Andyram2kJul 19.2009 — #Hooray ?

Also in #CSS _↴

A little Help? Is this possible?CSS2 :hover Problem in IE6 IE space below image

Success!

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

Tweet This

tricky layout works in Firefox, Safari – not IE

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

tricky layout works in Firefox, Safari – not IE

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴