Cross-browser coding I beleve

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..

Thats FireFox but in IE its fine

My CSS file is:

PHP Code:


#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...

Code:

<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;

Code:

#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

Originally Posted by Xedon

That looks buggered in both browser's...

Code:

<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..

Originally Posted by Klydo

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;

Code:

#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.

Thread: Cross-browser coding I beleve

Thread Tools

Cross-browser coding I beleve

Posting Permissions