...

View Full Version : IE is causing many issues!



WillyR
02-21-2009, 07:22 PM
http://up2go.co.uk/v3/?p=home

This is far as I could get "IE friendly", I'm really having trouble with it. In IE six it doesn't place the logo, in IE7 it places the logo but hides the navigation. In IE6 the clear float for the news bar creates an extra pixel or two of white space just popping out.

http://up2go.co.uk/image/200902211235211757ff3.PNG
Here it is in FF3

http://up2go.co.uk/image/200902211235211786ie6.PNG
IE6

Rowsdower!
02-22-2009, 01:41 AM
I don't have FF where I am right now so I can't cross-browser check it, but try this:


* {margin:0;padding:0;}

body {
background-color: #C1C1C1;
padding: 50;
text-align: center;
font-size: 13px;
font-family: Verdana, Helvetica, sans-serif;
color: #8E8E8E;
}
#container {
width: 656px;
margin:0 auto;
text-align: left;
padding: 50px 0px 0px 0px;
}
/* expanding content boxes */
#header {
background: url(http://up2go.co.uk/v3/images/header.gif) no-repeat bottom left;
height: 53px;
}
#contentmid {
margin-top:40px;
background: url(http://up2go.co.uk/v3/images/contentmid.gif);
width: 656px;
padding: 5;
}
#footerbot {
background: url(http://up2go.co.uk/v3/images/footerbot.gif);
height: 62px;
width: 656px;
font-size:0;
}
#uploadt {
font-size:0;
background: url(http://up2go.co.uk/v3/images/uploadt.gif);
height: 5px;
width: 378px;
}
#uploadm {
background: url(http://up2go.co.uk/v3/images/uploadm.gif);
width: 378px;
padding: 5;
}
#uploadb {
background: url(http://up2go.co.uk/v3/images/uploadb.gif);
height: 6px;
width: 378px;
font-size:0;
}
/* navgiation */
#navbar2 {
background: url(http://up2go.co.uk/v3/images/contentmid.gif);
margin-top:1px;
padding-bottom:10px;
height: 30px;
width: 100%;
}
#navbar2 ul {
text-align: right;
font-weight: bold;
margin: 5px;
padding: 20px;
font-family: Verdana, Helvetica, sans-serif;
font-size: small;
color: #CCC;
white-space: nowrap;
}
#navbar2 li {
list-style-type: none;
display: inline;
}
#navbar2 li a {
text-decoration: none;
padding: 0px 5px;
color: #8E8E8E;
font-size: 12px;
}
/* style **** */
.content {
padding: 20px;
width: 610x;
}
#topbar {
font-size:0;
background: url(http://up2go.co.uk/v3/images/topbar.png) no-repeat bottom left;
height: 7px;
width: 620px;
}
#middlebar {
background: url(http://up2go.co.uk/v3/images/middlebar.png);
width: 620px;
padding: 5;
}
#bottombar {
background: url(http://up2go.co.uk/v3/images/bottombar.png);
height: 6px;
width: 620px;
font-size:0;
}
#infobar {
float: left;
padding: 0px 0px 20px 0px;
width: 600px;
text-align: center;
}
#footerl {
text-align: center;
font-weight: bold;
padding: 20px 20px 20px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #666666;
white-space: nowrap;
font-size: 11px;
}
#logo {
float: left;
margin-left: 20px;
margin-top: 10px;
white-space: nowrap;
}
/* side bar */
#sidebox {
float: left;
width: 170px;
padding: 10;
}
a:link {
color: #CCC; text-decoration: none;
}
a:visited {
color: #CCC; text-decoration: none;
}
a:active {
color: #666; text-decoration: none;
}
a:hover {
color: #000; text-decoration: underline;
}
.floatstop {
clear:both;
}
.selectbox {
font-family: Arial, Helvetica, sans-serif;
line-height: normal;
padding: 4px;
width: 100%;
}
.textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 0pt;
line-height: normal;
padding: 4px;
width: 97%;
}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 0pt;
line-height: normal;
padding: 4px;
width: 92%;
}
#right {
float:right;
width:300px;
padding: 0px 0px 0px 0px;
}
#left {
float:left;
width:200px;
}
#left h2, #main h3, #main p {
padding:10 10px;
}

If that makes FF go crazy you could take the red bits from above and create a separate IE css file (add with a conditional statement) to take care of IE7 at least. This bit I added in blue (at the very top) is optional but it's a nice way to get your browsers to all start from common ground as much as possible.

WillyR
02-22-2009, 05:14 AM
I tried your edits and they ended up messing everything up in every browser. :(

I done some more work and came out with this

http://up2go.co.uk/image/200902221235247187ie666.PNG
IE6 (almost there..)

http://up2go.co.uk/image/200902221235247243ie7working.PNG
IE7 (works fine)

http://up2go.co.uk/image/200902221235247267ffup2go.PNG
FF3 (works fine)

WillyR
02-23-2009, 02:45 PM
bump :(

Rowsdower!
02-23-2009, 03:07 PM
Oh, I didn't realize that the menu items were supposed to be inside the grey bubble heading... That probably didn't help much then!

I don't have IE6 available here either so I can't help you debug that at all. Sorry! :(

Fisher
02-23-2009, 04:38 PM
Try this code:
CSS:
* {
margin:0;
padding:0;
}
body {
background-color: #C1C1C1;
padding: 50px;
text-align: center;
font-size: 13px;
font-family: Verdana, Helvetica, sans-serif;
color: #8E8E8E;
}
#container {
width: 656px;
margin:0 auto;
text-align: left;
padding: 0px 0px 0px 0px;
}
/* expanding content boxes */
#header {
background: url(header.gif) no-repeat bottom left;
height: 53px;
}
#contentmid {
background: url(contentmid.gif);
width: 100%;
}
#footerbot {
background: url(footerbot.gif);
height: 62px;
width: 100%;
font-size:0;
}
#uploadt {
font-size:0;
background: url(uploadt.gif);
height: 5px;
width: 378px;
}
#uploadm {
background: url(uploadm.gif);
width: 378px;
padding: 5px;
}
#uploadb {
background: url(uploadb.gif);
height: 6px;
width: 378px;
font-size:0;
}
/* navgiation */
#navbar2 {
margin-left: 0px;
margin-top: 0px;
float: right;
display:inline;
}
#navbar2 ul {
float: left;
text-align: right;
font-weight: bold;
margin: 5px;
padding: 20px;
font-family: Verdana, Helvetica, sans-serif;
font-size: small;
color: #CCC;
white-space: nowrap;
}
#navbar2 li {
list-style-type: none;
display: inline;
}
#navbar2 li a {
text-decoration: none;
padding: 0px 5px;
color: #8E8E8E;
font-size: 12px;
}
/* style **** */
.content {
margin-left: 20px;
}
#topbar {
font-size:0;
background: url(topbar.png) no-repeat bottom left;
height: 7px;
width: 620px;
padding-top:5px;
}
#middlebar {
background: url(middlebar.png);
width: 620px;
height: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#bottombar {
background: url(bottombar.png);
height: 6px;
width: 620px;
font-size:0;
}
#infobar {
float: left;
padding: 0px 0px 20px 0px;
width: 600px;
text-align: center;
}
#footerl {
text-align: center;
font-weight: bold;
padding: 20px 20px 20px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #666666;
white-space: nowrap;
font-size: 11px;
}
#logo {
margin:12px 0px 0px 10px;
float: left;
display:inline;
}
/* side bar */
#sidebox {
float: left;
width: 170px;
padding: 10px;
}
a:link {
color: #CCC;
text-decoration: none;
}
a:visited {
color: #CCC;
text-decoration: none;
}
a:active {
color: #666;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
.floatstop {
clear:both;
}
.selectbox {
font-family: Arial, Helvetica, sans-serif;
line-height: normal;
padding: 4px;
width: 100%;
}
.textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 0pt;
line-height: normal;
padding: 4px;
width: 97%;
}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 0pt;
line-height: normal;
padding: 4px;
width: 92%;
}
#right {
float:right;
width:300px;
padding: 0px 0px 0px 0px;
}
#left {
float:left;
width:200px;
}
#left h2, #main h3, #main p {
padding:10px 10px;
}
.submit {
background: #DBDBDB none repeat scroll 0% 50%;
border-color: #BBBBBB;
border-style: solid;
border-width: 2px 1px 1px;
color: #8a8a8a;
font-family: "Trebuchet MS";
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: bolder;
letter-spacing: 0pt;
line-height: normal;
padding: 4px;
width: 98%;
}
.textarea {
border-style: solid;
border-width: 2px 1px 1px;
color: #999999;
font-style: normal;
font-variant: normal;
letter-spacing: 0pt;
line-height: normal;
padding: 4px;
width: 98%;
}


Edit: Oops! You'll have to put back your correct paths to the images.

abduraooft
02-23-2009, 04:46 PM
Hi WillyR,

Do you need your navigation inside those white space(below header)? If, you can easily move that markup into div#contentmid.
Or do you need to align your navigation along with your logo inside header?

PS: beware of the Box model bug (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug), while applying a fixed width/height and margin/padding to your elements

WillyR
02-23-2009, 08:49 PM
Try this code:
CSS:
* {
margin:0;
padding:0;
}
body {
background-color: #C1C1C1;
padding: 50px;
text-align: center;
font-size: 13px;
font-family: Verdana, Helvetica, sans-serif;
color: #8E8E8E;
}
#container {
width: 656px;
margin:0 auto;
text-align: left;
padding: 0px 0px 0px 0px;
}
/* expanding content boxes */
#header {
background: url(header.gif) no-repeat bottom left;
height: 53px;
}
#contentmid {
background: url(contentmid.gif);
width: 100%;
}
#footerbot {
background: url(footerbot.gif);
height: 62px;
width: 100%;
font-size:0;
}
#uploadt {
font-size:0;
background: url(uploadt.gif);
height: 5px;
width: 378px;
}
#uploadm {
background: url(uploadm.gif);
width: 378px;
padding: 5px;
}
#uploadb {
background: url(uploadb.gif);
height: 6px;
width: 378px;
font-size:0;
}
/* navgiation */
#navbar2 {
margin-left: 0px;
margin-top: 0px;
float: right;
display:inline;
}
#navbar2 ul {
float: left;
text-align: right;
font-weight: bold;
margin: 5px;
padding: 20px;
font-family: Verdana, Helvetica, sans-serif;
font-size: small;
color: #CCC;
white-space: nowrap;
}
#navbar2 li {
list-style-type: none;
display: inline;
}
#navbar2 li a {
text-decoration: none;
padding: 0px 5px;
color: #8E8E8E;
font-size: 12px;
}
/* style **** */
.content {
margin-left: 20px;
}
#topbar {
font-size:0;
background: url(topbar.png) no-repeat bottom left;
height: 7px;
width: 620px;
padding-top:5px;
}
#middlebar {
background: url(middlebar.png);
width: 620px;
height: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#bottombar {
background: url(bottombar.png);
height: 6px;
width: 620px;
font-size:0;
}
#infobar {
float: left;
padding: 0px 0px 20px 0px;
width: 600px;
text-align: center;
}
#footerl {
text-align: center;
font-weight: bold;
padding: 20px 20px 20px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #666666;
white-space: nowrap;
font-size: 11px;
}
#logo {
margin:12px 0px 0px 10px;
float: left;
display:inline;
}
/* side bar */
#sidebox {
float: left;
width: 170px;
padding: 10px;
}
a:link {
color: #CCC;
text-decoration: none;
}
a:visited {
color: #CCC;
text-decoration: none;
}
a:active {
color: #666;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
.floatstop {
clear:both;
}
.selectbox {
font-family: Arial, Helvetica, sans-serif;
line-height: normal;
padding: 4px;
width: 100%;
}
.textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 0pt;
line-height: normal;
padding: 4px;
width: 97%;
}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 0pt;
line-height: normal;
padding: 4px;
width: 92%;
}
#right {
float:right;
width:300px;
padding: 0px 0px 0px 0px;
}
#left {
float:left;
width:200px;
}
#left h2, #main h3, #main p {
padding:10px 10px;
}
.submit {
background: #DBDBDB none repeat scroll 0% 50%;
border-color: #BBBBBB;
border-style: solid;
border-width: 2px 1px 1px;
color: #8a8a8a;
font-family: "Trebuchet MS";
font-size: 15px;
font-style: normal;
font-variant: normal;
font-weight: bolder;
letter-spacing: 0pt;
line-height: normal;
padding: 4px;
width: 98%;
}
.textarea {
border-style: solid;
border-width: 2px 1px 1px;
color: #999999;
font-style: normal;
font-variant: normal;
letter-spacing: 0pt;
line-height: normal;
padding: 4px;
width: 98%;
}


Edit: Oops! You'll have to put back your correct paths to the images.

Thanks!, your edits worked a treat :D

I ended up doing some edits so it still styles the content fine.

.content {
padding: 15px;
width: 620px;
margin: 0 auto;
overflow: hidden;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum