PDA

View Full Version : IE7 and lower stuff.. grr


pavid
07-18-2009, 11:47 PM
Hi there,

I know you must get this browser compatibility question eveeryy day. But it is a very user specific topic that it is hard to try and find the exact info in other places.

I am making a website for my friends parents company. It is going well, but there are just two issues with IE & and lower.

I have a container div centralized, but i wanted a white header at the top to span 100% widthwise, and the container is only 850px.

so i put a div with absolute positioning at z index -1 behind the header in the container. 100% width, top and left 0 positioning.

when viewing in IE or lower, the ap header is positioning to the containers positioning (i assume) but i need it to be flush to the left. i tried adding a relative position to the body, but it doesnt help.

the site is http://andrew.pullen.users.btopenworld.com/index7.html

to view it through IE use http://ipinfo.info/netrenderer/

the other issue isnt so important is the text in the main section that has the bullet points isnt acknowledging the margin between the text and the top divider line.

if any one could help, it would be really appreciated!!

thanks a lot

any feedback on the site would be great aswell

dave

Cary
07-19-2009, 12:30 AM
Personally, I would go with the banner being the same width as the main content and then just faking the wide banner by using a thin horizontally repeating background image on the body which includes the white with the black line, and the gradient extending down. This would also make your large background image unnecessary.

Firefox 2 doesn't support negative z-indexes. Or was that 1.5?

DWcourse
07-19-2009, 04:43 AM
Cary is right, you need a background image for the body tag that includes the white area and the rule as well as the gradient. It only needs to be a few pixels wide and to tile in the x direction.

Corrosive
07-19-2009, 09:51 AM
Cary is right, you need a background image for the body tag that includes the white area and the rule as well as the gradient. It only needs to be a few pixels wide and to tile in the x direction.

For my two pence worth I would make a header div which is 100% wide and then put my container div underneath it to centralise the rest of the website. Something like this...

CSS

#header {
width: 100%;
background-color: #ffffff;
}
#container {
width: 850px;
margin: auto;
}

HTML

<div id="header">Header stuff</div>
<div id="container">The rest of your website</div>

pavid
07-19-2009, 11:56 AM
Thanks for the replies! The problem with adding the 100% header to the bacground image is that the bg image now is a photograph so the gradient isn't symetrical in anyway. I would quite like to keep it like that. I could add the banner to the top of the image but I didn't want it to scroll with the page otherwise when the content gets big enough to make the site scroll there could be q horrible repeated image line. So I like the bottom static. Cheers anyway!

As for the header being over the top of the container, the logo would need to be inside the container to centralise with the rest of the site, and surly being under the header on top it will not be shown? In a way I did what you suggested, but having the div underneath the main container.

Again, thanks alot for the help, really appreciate it!

It would be great to get this sorted. It's dragging on too long. Haha

cheers

Corrosive
07-19-2009, 12:01 PM
As for the header being over the top of the container, the logo would need to be inside the container to centralise with the rest of the site, and surly being under the header on top it will not be shown? In a way I did what you suggested, but having the div underneath the main container.

Again, thanks alot for the help, really appreciate it!

It would be great to get this sorted. It's dragging on too long. Haha



That's because you are over-complicating it. If you want your logo to be centred in the 100% width div then set it as a background and align the background image centre. I am also struggling to understand why you think the header won't be shown? Use relative positioning and the container will sit underneath the header.

DWcourse
07-19-2009, 02:50 PM
Actually Corrosive's way is probably the cleanest.

And there's no need to worry about the body background-image repeating as the content grows. Only tile the body backgroundimage in the x direction. Make sure the body background-color is the same color as the bottom pixel in your background image. That way it will blend seamlessly.

MagicPower
07-20-2009, 09:38 PM
To fix the IE problems. take two wrappers (wrapper0 & wrapper)

wrapper0 will contain a blank #header and #lla with the logo
insert #lineback after wrapper0 and keep its width to 100%
the #lineback properties have to change from absolute, give it height inorder to achieve the gap between #wrapper0 and #wrapper.

#lineback should be between wrapper0 and wrapper
Also delete #lawrencelemmy and #headerback divs because now they are unneccessary

After #lineback is the #wrapper conataining all the other divs such as #leftside, #maincontent etc.

Here (http://www.oed4u.com/index7.html) is what i came up with, i also tested it with IE NetRenderer.

Corrosive
07-21-2009, 06:07 AM
To fix the IE problems. take two wrappers (wrapper0 & wrapper)

wrapper0 will contain a blank #header and #lla with the logo
insert #lineback after wrapper0 and keep its width to 100%
the #lineback properties have to change from absolute, give it height inorder to achieve the gap between #wrapper0 and #wrapper.

#lineback should be between wrapper0 and wrapper
Also delete #lawrencelemmy and #headerback divs because now they are unneccessary

After #lineback is the #wrapper conataining all the other divs such as #leftside, #maincontent etc.

Here (http://www.oed4u.com/index7.html) is what i came up with, i also tested it with IE NetRenderer.

Not sure what you are answering here MagicPower. Also looking at your page I don't see anything that couldn't be achieved with a 100% width div for the header with a border and a margin at the bottom and then a wrapper div with px width and auto margins for the content. Not sure why you suggest adding and then deleting divs to create a layout :confused:

MagicPower
07-21-2009, 09:02 AM
Not sure what you are answering here MagicPower. Also looking at your page I don't see anything that couldn't be achieved with a 100% width div for the header with a border and a margin at the bottom and then a wrapper div with px width and auto margins for the content. Not sure why you suggest adding and then deleting divs to create a layouthe will not be able to have that logo in the place he wants it to be if he wants it contained in 100% header. since he wants a header that spans 100% and also wants the logo to be centered as the other content. i figured that if the main blue bg is edited and by adding white at the top to it, you will come to see that it makes the page look as if tho the header is spanning 100% width but yet it is the #lineback div that does that. If you look at that page above, does it not look like the header spans 100%, even though in Dw it doesn't but you can come close by editing the main blue bg (small.jpg).

Corrosive
07-21-2009, 10:41 AM
he will not be able to have that logo in the place he wants it to be if he wants it contained in 100% header. since he wants a header that spans 100% and also wants the logo to be centered as the other content. i figured that if the main blue bg is edited and by adding white at the top to it, you will come to see that it makes the page look as if tho the header is spanning 100% width but yet it is the #lineback div that does that. If you look at that page above, does it not look like the header spans 100%, even though in Dw it doesn't but you can come close by editing the main blue bg (small.jpg).

Would a banner image the width of the main site (with the logo where it is required) and then centred as a background do the same job with less messing about? Just a thought. That's how I'd approach it anyway.