OutFront Forums
     Home    Register     Search      Help      Login    

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

 

IE not playing ball with bground image

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> IE not playing ball with bground image
Page: [1]
 
paul rayner

 

Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline

 
IE not playing ball with bground image - 8/26/2009 5:13:45   
I've used a background gif that's 1200 x 1px to frame a container 800px wide.

View at http://www.rightintoit.com/shadow.html

In Firefox 3 it seems to work as intended. But in IE, the main container is move over to the right about 170px.
Here's the main part of the applicable CSS.
body
{
margin: 0px;
padding: 0;
color: #000;
background-color: #ddd;
background-image:url(images/bground.gif);
font-family: Arial, Helvetica, sans-serif;
text-align: center; 
}
#container
{
/*margin: 0px auto;*/
margin-left:120px;
background-color:#FFFFFF;
border: 1px solid #333;
width: 800px;
padding-top: 0px
}


The bground image is 1200 wide and has a space 800px wide, 120px from the left hand side. That's why I put a margin of 120px on the container.
Can anyone explain why I haven't managed to get it to work in IE yet please?

Ciao

_____________________________

" In theory, there is no difference between theory and practice. But, in practice, there is!"
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: IE not playing ball with bground image - 8/26/2009 6:10:22   
I can't even get IE to open at the moment so can't be a lot of help I'm afraid!!

Did you want the container div centred? It looks a little odd off to the left like that (in my opinion!).

Unless you actually want the main containing div to be 120px from the left I'd suggest clipping the background image back so that it's just the shadow image - no whitespace on either side. Then centre it on the body element:

body {background: url(images/bground.gif) center top repeat-y;}

Then you can centre the main containing div using margin:0 auto and get rid of the left margin on the contents div - just float that next to the nav div.

Might reduce the problems.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to paul rayner)
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: IE not playing ball with bground image - 8/26/2009 6:18:50   
Just got IE8 open. Works fine in normal mode - does the naughty in "compatibility" mode.

I think it might possibly be just the double-margin bug. Try adding "display:inline" to the content div and possibly also the nav div see if that helps.

My comment above stands though - never had much luck with the "big margin for the sidebar" routine!

IE8 is very irritating. If your example is the double-margin bug then it means that we not only have to test our sites for how they should look in a modern browser - but also how they might look in a broken one. This is what we end up doing now anyway with IE6 and IE7 BUT it means that we'll have to keep doing this for years and years.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to Tailslide)
paul rayner

 

Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline

 
RE: IE not playing ball with bground image - 8/26/2009 6:23:31   
Are you saying that the margin of 120px isn't the way to go?

Is there an alternative with this style of page - or should I just ditch this sort of style?

_____________________________

" In theory, there is no difference between theory and practice. But, in practice, there is!"

(in reply to Tailslide)
paul rayner

 

Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline

 
RE: IE not playing ball with bground image - 8/26/2009 7:08:52   
I used the display:inline; command, but it doesn't appear to fix the problem in IE7.

The CSS doesn't validate - there is one error with text-shadow being incompatible with CSS 2.1, but that shouldn't worry the divs.

The XHTML does validate OK.

_____________________________

" In theory, there is no difference between theory and practice. But, in practice, there is!"

(in reply to paul rayner)
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

 
RE: IE not playing ball with bground image - 8/26/2009 11:25:30   

quote:

ORIGINAL: paul rayner

Are you saying that the margin of 120px isn't the way to go?

Is there an alternative with this style of page - or should I just ditch this sort of style?


It's just personal preference - what I've found easier basically!! If you want the container to be centred (rather than 120px from the left) then centre the background image on the body element and centre the main containing div on top of that. Then float the left and right divs within that containing div.





_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to paul rayner)
paul rayner

 

Posts: 232
Joined: 3/15/2001
From: yeppoon, qld, aus
Status: offline

 
RE: IE not playing ball with bground image - 8/26/2009 17:17:43   
Thanks again Tailslide.
Once I got my head around making the image smaller, it all worked perfectly.

Thanks heaps.

_____________________________

" In theory, there is no difference between theory and practice. But, in practice, there is!"

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> IE not playing ball with bground image
Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts