Cross-browser coding I beleve [Archive]

Ini

24-03-2008, 12:51 PM

Ok, well i don't code in DIV's very often, but when i do always get a problem with one of the browsers.

Well my Problem is..

http://revisionhelp.info/new/FF.png

Thats FireFox but in IE its fine

http://revisionhelp.info/new/IE.png

My CSS file is:

#top {
position: absolute;
background: url(images/top.jpg) no-repeat #A9212F;
width: 100%;
height: 29px;
z-index: 2;
left: 0px;
top: 0px;
}
#banner {
position:absolute;
width: 100%;
height: 200px;
z-index:2;
top: 29px;
background: url(images/banner.jpg) no-repeat #92C9FF;
left: 0px;
}
#search {
position:absolute;
width:256px;
height:65px;
z-index:1;
left: 700px;
background-image: url(images/search.jpg);
top: -1px;
}
#contenttop {
position:absolute;
width: 100%;
height:46px;
z-index:2;
top: 229px;
background-image: url(images/content_top.jpg);
left: 0px;
}
#homelink {
position:absolute;
width:67px;
height:26px;
z-index:4;
left: 662px;
top: 216px;
background-image: url(images/home.jpg);
}
#loginlink {
position:absolute;
width:54px;
height:26px;
z-index:5;
left: 728px;
top: 216px;
background-image: url(images/login.jpg);
}
#registerlink {
position:absolute;
width:73px;
height:26px;
z-index:6;
left: 781px;
top: 216px;
background-image: url(images/register.jpg);
}
#bg {
position:absolute;
width: 100%;
height: 100%;
z-index:7;
top: 275px;
left: 0px;
right: 0px;
bottom: 0px;
padding-left: 80px;
padding-top: 20px;
background: #c92536 url(images/bg.jpg) repeat-x;
}
#content1 {
width:912px;
height:40px;
z-index:8;
padding-bottom: 0px;
background-color: #FFFFFF;
}
#content2 {
width:912px;
height: auto;
z-index:2;
padding-bottom: 0px;
background-color: #FFFFFF;
}
#content3 {
width:914px;
height:82px;
z-index:21;
padding-bottom: 0px;
background-image: url(images/contentbottom.jpg);
}

body {
background-color: #FFFFFF;

}

Thanks for any help..

Independent

24-03-2008, 01:07 PM

That looks buggered in both browser's...

<script>

//Browser redirect Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and Terms Of Use,
//visit dynamicdrive.com

var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)

//if NS 6
if (browser_type=="Netscape"&&browser_version>=5)
window.location.replace("http://mozilla.org")
//if IE 4+
else if (browser_type=="Microsoft Internet Explorer"&&browser_version>=4)
window.location.replace("http://microsoft.com")
//if NS4+
else if (browser_type=="Netscape"&&browser_version>=4)
window.location.replace("http://www.netscape.com")
//Default goto page (NOT NS 4+ and NOT IE 4+)
else
window.location="http://www.dynamicdrive.com"
</script>

Information:

This blank page will act as the browser redirector. Change the destinations inside the script from Netscape.com, Microsoft.com, and Geocities.com to others, depending on whether the user is using NS 4, NS 6+, IE 4, or none of the above, respectively.

Then..
Create a blank page, and add the following code to the <head> section of it:#

Klydo

24-03-2008, 01:12 PM

Okay you're wasting a lot of time making a redirect. You've basically go margin problems. Replace the #content1, #content2 and #content3 with this;

#content1 {
width:912px;
height:40px;
z-index:8;
padding-bottom: 0px;
background-color: #FFFFFF;
overflow: hidden;
}

#content2 {
width:912px;
height: auto;
z-index:2;
padding-bottom: 0px;
background-color: #FFFFFF;
overflow: hidden;
}

#content3 {
width:914px;
height:82px;
z-index:21;
padding-bottom: 0px;
background-image: url(images/contentbottom.jpg);
overflow: hidden;
}

[Oli]

24-03-2008, 01:21 PM

That and people need to learn how to code with css using the position: relative;
instead of the position: absolute;

Relative is much more reliable then absolute when it comes to positioning and cross-browser compatibility

Ini

24-03-2008, 01:30 PM

That looks buggered in both browser's...

<script>

//Browser redirect Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and Terms Of Use,
//visit dynamicdrive.com

var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)

//if NS 6
if (browser_type=="Netscape"&&browser_version>=5)
window.location.replace("http://mozilla.org")
//if IE 4+
else if (browser_type=="Microsoft Internet Explorer"&&browser_version>=4)
window.location.replace("http://microsoft.com")
//if NS4+
else if (browser_type=="Netscape"&&browser_version>=4)
window.location.replace("http://www.netscape.com")
//Default goto page (NOT NS 4+ and NOT IE 4+)
else
window.location="http://www.dynamicdrive.com"
</script>Information:

This blank page will act as the browser redirector. Change the destinations inside the script from Netscape.com, Microsoft.com, and Geocities.com to others, depending on whether the user is using NS 4, NS 6+, IE 4, or none of the above, respectively.

Then..
Create a blank page, and add the following code to the <head> section of it:#

What you mean buggered in both browsers?

It is fine in IE, i removed abit of the top of it as it's not to be released yet.

Why do it need all that redirect crap, i want it to work in both browsers not make them have to download a diffrent one to use the site..

Okay you're wasting a lot of time making a redirect. You've basically go margin problems. Replace the #content1, #content2 and #content3 with this;

#content1 {
width:912px;
height:40px;
z-index:8;
padding-bottom: 0px;
background-color: #FFFFFF;
overflow: hidden;
}

#content2 {
width:912px;
height: auto;
z-index:2;
padding-bottom: 0px;
background-color: #FFFFFF;
overflow: hidden;
}

#content3 {
width:914px;
height:82px;
z-index:21;
padding-bottom: 0px;
background-image: url(images/contentbottom.jpg);
overflow: hidden;
}

Thanks I didnt do that redirect crap, but it didnt change when i put the overflow in?

Any other help?

Thanks

Klydo

24-03-2008, 01:56 PM

I can't help, as I can't see your HTML. Give me a direct link to the layout, so I can edit in Firebug.

Ini

24-03-2008, 02:02 PM

NeverMind, Fixed

Thread Closed.