|
CSS - It's All Screwed Up In Ie, Perfect In Ff, Help?!
Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE
http://drowninginmytears.org/store/blah.html thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how.. this is my css: Code: body
{
margin: 0px auto;
background-color: #BFD1E1;
text-align: center;
padding: 0px;
background-position: top;
}
#wrap
{
position: relative;
margin: 0 auto;
text-align: left;
width: 679px;
}
#hearts
{
background-image: url(hearts.jpg);
height: 44px;
width: 43px;
position: absolute;
margin-left: 490px;
}
#girl
{
background-image: url(girl.jpg);
margin-top: 190px;
height: 358px;
width: 142px;
margin-left: 10px;
}
h4 {
font-family: Arial, verdana, tahoma;
text-transform: uppercase;
font-size: 1.0em;
text-align: right;
font-weight: bold;
color: #5886B2;
letter-spacing: 0px;
padding: 10px 20px 0px 0px;
margin: 0;
}
h5 {
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.7em;
text-align: right;
line-height: 5px;
font-weight: bold;
color: #C3D4E3;
letter-spacing: 3px;
padding-right: 17px;
margin: 0;
}
#navigation
{
font-family: verdana, Arial, tahoma;
text-transform: uppercase;
font-size: 0.54em;
text-align: left;
font-weight: bold;
color: #769DBF;
letter-spacing: 1px;
margin-top: 25px;
margin-left: 20px;
position: absolute;
}
#toptitle
{
background-position:top;
height: auto;
width: 768px;
background-image: url(bg.jpg);
padding: 0px;
margin: 0px;
}
#blueline
{
height: 6px;
width: 752px;
background-color: #D8E8F8;
margin-top: 8px;
margin-left: 8px;
margin-right: 0px;
position: absolute;
}
#headerimage
{
height: 173px;
width: 752px;
background-image: url(main.jpg);
margin-top: 15px;
margin-left: 8px;
position: absolute;
}
#main {
margin-top: 100px;
width: 768px;
margin: 20px 0;
margin-left:40px;
display: inline;
}
#header
{
background-image: url(top.jpg);
vertical-align: bottom;
height: 10px;
width: 768px;
margin-top: 20px;
padding: 0px;
}
#bottom
{
background-image: url(bottom.jpg);
vertical-align: bottom;
height: 17px;
width: 768px;
margin-top: 0px;
padding: 0px;
}
p
{
text-align: justify;
color: #555;
margin-top: 0px;
margin-bottom: 9px;
}
.caps
{
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
ol
{
margin: 0;
padding: 0;
}
ul, li
{
color: #666;
list-style-type: none;
border: 0;
margin: 0;
padding: 0;
}
a:link, a:visited
{
color: #FA65CD;
text-decoration: none;
}
a:hover
{
color: #FD92E0;
}
a:active
{
color: #FB7FD7;
}
#container
{
position: relative;
margin: 0 auto;
text-align: left;
background: url(bgfront.gif) repeat-y;
width: 679px;
}
#content
{
padding: 28px 20px 0 20px;
min-height: 200px;
}
can anyone help? thanks! Similar TutorialsOkay first of all I'd like to thank you for taking the time to look over this. The site is at http://projects.bluefusionx.com/scoped/profile/photos/manage/My%20Photos login using demo demo. The positioning is messed up and I can't figure out why. These are the style rules I have set for that section: Code: #image_browsem {
margin-top: 20px;
width: 809px;
}
#image_browsem_l {
float: left;
width: 52px;
}
#image_browsem_m {
float: left;
width: 705px;
}
#image_browsem_r {
float: right;
width: 30px;
margin-left: 22px;
margin-right: 3px;
}
#edit_caption {
clear: both;
}
.mp_caption {
position: relative;
left: 90px;
margin-top: 40px;
border: 1px solid #9A9A9A;
width: 525px;
height: 125px;
padding-bottom: 0px;
padding-right: 0px;
margin-left: 35px;
margin-bottom: 77px;
}
.mp_caption_left {
float: left;
width: 120px;
height: 182px;
padding: 10px 10px 10px 10px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.mp_caption_right {
float: right;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 0px;
width: 380px;
height: 115px;
background-color: #EFEEEE;
}
.mp_caption_right input {
margin-right: 5px;
margin-left: 18px;
}
.mp_caption_right form {
position: relative;
top: 62px;
}
.mpcaption_text {
margin-top: 8px;
width: 318px;
}
.mpcaption_input {
margin-top: 8px;
}
#move_select {
margin-left: 20px;
}
#mpcaption_delete {
margin-left: 127px;
}
.mp_label {
font-weight: bold;
position: relative;
top: 15px;
}
#mp_label1 {
font-weight: bold;;
}
#mp_label2 {
font-weight: bold;
position: relative;
top: 15px;
}
#mp_label3 {
font-weight: bold;
position: relative;
top: 30px;
}
.mp_caption form {
float: left;
border: 1px solid black;
}
.mp_caption_right form {
width: 375px;
}
Any help is appreciated. Ok i have a piece of code for the menu that works the way i want in IE but in Mozilla totaly screwed. Any help to fix this? Try this link in IE then in FireFox HTML Code: <div id="navcontainer"> <ul id="navlist"> <li><a href="#">Home</a></li> <li><a href="#">Community</a></li> <li><a href="#">Members</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Servers</a></li> <li><a href="#">IRC</a></li> <li><a href="#">About</a></li> <li><a href="#">Links</a></li> </ul> </div> CSS Code:
#navcontainer
{
heigt:100px;
}
#navlist ul
{
margin-left: 0;
padding-left: 0;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a {
padding: 3px 10px;
margin: -3px 6px;
}
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
text-align:center;
background: #366 url(lbg.gif);
width: 100px;
height: 100px;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
Hello, My site is on Wordpress and I have changed some CSS. Now my site gets screwed up when I change something in the sidebar. For example if I add something bigger than sidebar width the text on the right drops all the way down in IE. However in firefox everything seem to be fine. But still in IE when I minimize the window the text jumps down. Also when I checked my site on doomaintools.com it showed a small picture of my site but the page is screwed up. I think it is CSS problem. I want to make the sidebar and right side to a particular width so it doesn't change. How can it be done? site is sushicup.com If you are good with css please help me! I'm so lost. Thank you. rush4rk I'm having a bit of trouble trying to figure out the problem he http://www.lovemeforme.org/alecia as you can see, in IE the main content is over about 3px, but in firefox it's perfect.. i'm a perfectionist and it's really bothering me. Thanks in advance! I think all I need is a new set of eyes. I have an XHTML-Strict-All-Div-Perfect layout for a new site I am working on. I have all of the heights and widths and alignments perfect. Everything was supurb until I added content that extends greater than 100% of the viewport. Typical story, I know. The thing is, I have made hundreds of web sites and came across and fixed that problem. I've used min-height, I've made sure to include all containers like html and body.. I am pretty sure I've done it all. So what's up? Please take a look at the site and tell me what you think. Realms Of Role Playing My website open fine in pretty much everything except IE (Ie is terrible). I tried to use the "if ie" stylesheet link but its not working. Help please. Test server is http://ivorygaming.clanservers.com/debuhrs HTML Code: <html> <head> <title>deBuhrs Seed & Feed</title> <!--[if IE 7]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]--> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> </head> <body bgcolor="#070707"> <div id="navbar"><ul id="navbar"> <li><a href="index.html"><span id="green">H</span><span id="white">ome</span></a></li> <li><a href="about.html"><span id="green">A</span><span id="white">bout</span></a></li> <li><a href="staff.html"><span id="green">S</span><span id="white">taff</span></a></li> <li><a href="products.html"><span id="green">P</span><span id="white">roducts</span></a></li> <li><a href="contact.html"><span id="green">C</span><span id="white">ontact</span></a></li> </ul> <div id="logo"></div> <div id="front"></div> <div id="side"></div> <h2>New Website</h2> <hr color="#b9bab9" width="60%" align="left" height="50%"> <p class="postinfo">posted by Bernie deBuhr at 10.39 p.m. Sunday, July 4th, 2009</p> <p class="content">    deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.deBuhr's Feed and Seed is a 4th generation retail store located in downtown Mattoon. We sell a huge selection of pet feed and supplies, horse feed and other livestock feed along with many products for your lawn and garden. We are service oriented.</p> <div id="bottom"></div> <div id="container"></div> </body> </html> ie.css Code: @charset "utf-8"; /* CSS Document */ body { margin: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding: 0; text-align: center; } #container { width: 1024px; height: 15px; margin: 0 auto 0 auto; text-align: left; } #logo { height: 112px; width: 702px; padding-bottom: 0px; padding-top: 0px; margin-top: 1000px; margin-left: -200px; background: #FFF url('images/logo.png') ; } #front { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/front.png') ; } #side { height: 444px; width: 312px; padding-bottom: 0px; padding-top: 0px; margin-top: -269px; margin-left: 700px; background: #FFF url('images/side.png') ; } #block { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -177px; margin-left: 10px; background: #FFF url('images/block.png') ; } #block1 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 124px; background: #FFF url('images/block.png') ; } #block2 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 238px; background: #FFF url('images/block.png') ; } #block3 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 352px; background: #FFF url('images/block.png') ; } #block4 { height: 25px; width: 111px; padding-bottom: 0px; padding-top: 0px; margin-top: -25px; margin-left: 466px; background: #FFF url('images/block.png') ; } #navbar ul li { padding-left: -10px; position: relative; display: inline; padding-top: 383px; color: #FFFfff; float: left; font-size: 10pt; font-family: arial; font-style: italic; margin-left: 15px; } #green { color: #9bf006; font-size: 11pt; font-family: arial; font-style: italic; } #white { color: #c8cbc3; font-size: 9pt; font-family: arial; font-style: italic; } a { text-decoration:none; color:#930; border-bottom: 1px solid #5b8c04 } h1,h2,h3,h4,h5 { margin:0; text-align:left; color:#9bf006; font: arial; margin-top: -100px; margin-left: 15px; } p.postinfo { margin:0; text-align:left; color:#a0a19e; font: arial; margin-top: 0px; margin-left: 35px; font-size: 8pt; } p.content { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 15px; margin-left: 40px; font-size: 10pt; width: 600px; height: 200px; } p.phone { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: -180px; margin-left: 40px; font-size: 10pt; } p.email { margin:0; text-align:left; color:#c6c6c6; font: arial; margin-top: 3px; margin-left: 40px; font-size: 10pt; } #bottom { height: 269px; width: 619px; padding-bottom: 0px; padding-top: 0px; margin-top: 0px; margin-left: 5px; background: #FFF url('images/bottom.png') ; }
Hi, I'm looking for code that will display a ul with nested uls as a dropdown. Furthermore, the links and dropdowns should center in the width of the nav. as I add more top level links, the set should expand both left and right. Right now, I can either make the nav align left, or justify the top level ul so the links fill the nav. I can't seem to make the leap to centered links though. You can see what I'm talking about he lipsitzponterio9[dot]com Notice how the home link is left aligned, but contact us has a little space to the right. Can anyone help? Thanks! Hi all, I'm pretty anal about the layouts I make.. especially when it comes to my own site. This is the first time I have really attempted designing to validate within the strict doctype. The only thing is the layout I am trying to get to work requires A LOT of layers, and a lot of them need to line up with eachother. I am running in to problems because some layers are pushed down further than others on the page. The difference is noticeable (10 or 15 pixels) when I change from Firefox to Explorer. Is there anyway around this, am I missing something here? My page is uploaded at http://www.studioflow.net/display.html and my css file is here http://www.studioflow.net/sfglobal.css Do I need to just abandon my quest for pixel perfect alignment? Thanks, alan Hi, we are hoping someone can help us figure out why (besides the obvious) our CSS isn't rendering our site correctly in any version of IE. If you take a look at our website (DJDeals) in Chrome or Safari, you'll see how it should look. Then take a look in IE. The shopping cart and other major features are WAY our of place... help? Hi, im just getting into CSS, and decided to convert my website from HTML w/ Tabkes to CSS , for smaller load times, make it more professional.. My problem is, I just finished and it looks fine under Firefox (Linux & Windows).. But it looks absolutely horrible in IE? Can anyone find an mistake. I validated the CSS with W3's validater thing. http://mp3realm.org/new/index.php (First one) http://mp3realm.org/new/search.php (search page) http://mp3realm.org/new/default.css (CSS) Thanks. Hello everyone. I have been working on a redesign of my current website for a while. Early on, I realized that the design was flawed for I.E. (I use Firefox on a regular basis for testing). I went ahead and just finished the design anyway, using Firefox to test. Now that it's done, I'm hoping that there's some stupid error in my CSS that's causing the problems, and hoping that someone can find the problem. If it's a big problem and alot of work to fix, I'm willing to pay someone to help me correct the issue. The main problem is my navigation bar at the top, which consists of drop-down menus. There's also a problem with how the background lines up. If you want to see what I'm talking about, go look at the site both in Firefox and I.E. The URL is: http://www.favillephoto.com/new website/index.html I have 2 different css files. One for my index page, because it is designed differently and has a sidebar. And then a second one for the rest of my pages on the site. I'll attach the CSS for both, in case there's an issue there. Thanks in advance for your help. This is the css file for my index page: Code: body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 760px;
height: 2040px;
padding: 20px;
background: #FFFFFF url('images/img07.gif') no-repeat left bottom;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
height: 2070px;
padding-top: 10px;
padding-right: 10px;
background: #ffffff url('images/img07a.gif') no-repeat right bottom;
}
#sidebar a {
color: #dddddd;
}
#sidebar a:hover {
color: #999999;
text-decoration: underline;
}
#sidebar ul {
margin-left: 0;
padding-left: 0;
list-style: none;
font-size: 92%;
}
#sidebar ul li {
background: url('images/img13.gif') no-repeat 0px 12px;
border-top: 1px solid #0B0B0B; padding-left:14px; padding-right:14px; padding-top:5px; padding-bottom:5px
}
#sidebar ul li.first {
border: none;
}
#sidebar ul li h2 {
margin: 0;
font-size: 100%;
}
#sidebar ul li h3 {
margin: 0;
font-size: 92%;
}
#sidebar ul li p {
color: #dddddd;
margin: 0;
}
#sidebar p {
color: #dddddd;
margin: 0;
font-size: 92%;
}
.boxed {
margin-bottom: 10px;
background: #113c5c url('images/img10.gif') no-repeat left bottom;
}
.boxed .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxed .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
.boxedPrintoftheMonth {
margin-left: -790px;
background: #113c5c url('images/img10PotM.gif') no-repeat left bottom;
}
.boxedPrintoftheMonth .title {
height: 30px;
margin: 0;
background: #000000 url('images/img08PotM.jpg') no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000; padding-left:0px; padding-right:0; padding-top:10px; padding-bottom:0
}
.boxedPrintoftheMonth .content {
padding: 15px;
background: url('images/img09.gif') repeat-x;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
This is the css for the rest of my pages: Code:
body {
padding: 0;
background: #ffffff url('images/img01.jpg');
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333; margin-left:0; margin-right:0; margin-top:20px; margin-bottom:0
}
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
color: #AD1112;
}
h1 {
font-size: 250%;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 140%;
font-weight: bold;
}
h4 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
font-style: italic;
}
blockquote * {
line-height: normal;
}
a {
color: #1267bc;
}
a:hover {
color: #999999;
}
img {
border: none;
}
img.left {
float: left;
margin: 10px 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
img.left1 {
float: left;
margin: 0 70px 0 70px;
}
img.right1 {
float: right;
margin: 0 70px 0 70px;
}
img.left2 {
float: left;
margin: 20px 100px 20px 100px;
}
img.right2 {
float: right;
margin: 30px 120px 20px 120px;
}
img.left3 {
float: left;
margin: 0 110px 0 110px;
}
img.right3 {
float: right;
margin: 20px 60px 0 60px;
}
hr {
display: none;
}
/* Header */
#header {
width: 1030px;
height: 260px;
margin: 0 auto;
background: url('images/img02.jpg') no-repeat right top;
}
/* Menu */
#menu {
float: right;
width: 1030px;
height: 40px;
padding: 220px 0 0 0;
}
#menu a {
display: block;
height: 32px;
background: url('images/img06.gif') no-repeat;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #FFFFFF; padding-left:12px; padding-right:13px; padding-top:8px; padding-bottom:0
}
#menu ul {
width: 1026px;
height: 40px;
margin: 0;
padding: 0;
background: #AD1011 url('images/img05.jpg') repeat-x;
border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;
list-style-type:none
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu li a:hover
{ color: #123456;}
#menu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #000000;
}
#menu div a
{ position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: auto;
height: 20px;
white-space: nowrap;
text-align: left;
background: #6c91c5;
color: #ffffff;}
#menu div a:hover
{ color: #123456;}
/* Page */
#page {
width: 1030px;
margin: 0 auto;
}
/* Content */
#content {
float: left;
width: 990px;
padding: 20px;
background: #FFFFFF url('images/img07b.gif') no-repeat left bottom;
}
/* Footer */
#footer p {
margin: 0;
line-height: normal;
font-size: 85%;
color: #000000;
}
#footer a {
color: #000000;
}
#footer a:hover {
color: #666666;
}
<body> <div id="wrapper" style=" vertical-align:middle;"> <div id="border-top"> <div id="border-left"> <div id="border-right"> <div id="border-bottom"> </div> </div> </div> </div> </div> </body> body { background-color:#5E362C; margin: 0 0 0 0; } #wrapper { width: 828px; height: 558px; position:relative; left: 50%; margin-left:-414px; } #border-top { background-image: url(../Webdesign/MIRAGE services1_r2_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; } #border-left { background-image: url(../Webdesign/MIRAGE services1_r3_c2.jpg); background-position:top left; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:20px; } #border-right { background-image: url(../Webdesign/MIRAGE services1_r3_c18.jpg); background-position:top right; background-repeat:repeat-y; width: 828px; height: 557px; margin-top:-20px; margin-bottom:20px; } #border-bottom { background-image: url(../Webdesign/MIRAGE services1_r10_c3.jpg); background-position:bottom right; background-repeat:no-repeat; width: 828px; height: 558px; margin-top:-1px; } Thanks for the help ! Hi, I've just spent all night re-building my site as HTML and CSS, since my Joomla site was suffering from a slight case of death due to "hosting issues" during a plaform migration I've got the site looking and working sweet, apart from one small thing. In Netscape 8.1 which I currently have installed, it loads the content in the right of the design right down at the bottom of the screen. When you refresh the browser it jumps back to the top, and it works perfectly for all links !!! It displays superbly in IE all of the time. I've been through the CSS checking that I'm using the clear and float in the right places, and I've checked the actual widths of all of the elements to be sure that they add up to what they are supposed to, but somehow it's still only displaying properly in Netscape after a page refresh. I've put in all of the box model hacks in my code for old browsers. The only thing that stops this from happening is removing the tag "display:table;" in my CSS. But that's used to extend the faux columns down to the bottom of the screen in Netscape. I'm not keen on any of the hacks for extending columns, so I decided on faux columns. The thing is, if it is that tag that's causing it to display incorrectly, why is it having no effect when the page gets reloaded? Try for yourself. Click a link in the menu a few times, then click the refresh button a few times. You will see the content load incorrectly, and then correctly! Puzzling. http://www.acecards.com Code: body {
background-color: #999999;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
}
#container {
width: 750px; /* For browsers with no escapes */
\width: 770px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #000000;
}
#banner {
width: 750px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
height: 251px;
background-repeat: no-repeat;
clear: both;
}
#mainarea {
clear: both;
width: 750px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
background: url(images/fauxcolumns.gif) repeat-y;
display: table;
}
#sidebar {
width: 179px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 179px; /* For good browsers */
background-color: #993300;
float: left;
}
#content {
margin-top: 0px;
float: right;
background-color: #FFFFFF;
width: 570px; /*For browsers with no escapes */
\width: 570px; /*For IE5/Win*/
w\idth: 570px; /*For good browsers */
}
#footer {
width: 740px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 740px; /* For good browsers */
padding: 5px;
clear: both;
}
.FooterText {
font-family: Verdana;
color: #FFFFFF;
font-size: 10px;
text-align: right;
}
.Bodytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
line-height: 17px;
text-align: justify;
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
.Bodylink {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #499EEE;
font-size: 12px;
line-height: 17px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
}
.Bodyhighlight {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #993300;
font-size: 12px;
line-height: 17px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
}
.SideBarBanner {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
line-height:inherit;
padding-top: 5px;
padding-bottom: 5px;
}
.SideBarLink {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.SideBarHeadingTop {
background-color: #FF9B6A;
height: auto;
width: 169px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 169px; /* For good browsers */
padding: 5px;
color: #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-bottom:thin solid;
border-bottom-color:#D74600;
}
.SideBarHeading {
background-color: #FF9B6A;
height: auto;
width: 169px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 169px; /* For good browsers */
padding: 5px;
color: #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top:thick solid;
border-top-color:#000000;
border-bottom:thin solid;
border-bottom-color:#D74600;
}
.SideBarMenuBlock {
background-image: url(images/button.gif);
background-repeat: no-repeat;
height: 26px;
margin-top: 4px;
margin-bottom: 0px;
padding-left: 20px;
margin-left: 9px;
margin-right: 9px;
width: 159px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 159px; /* For good browsers */
text-align: left;
vertical-align: middle;
color: #000000;
font-size: 11px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: underline;
}
.Heading {
width: 520px; /* For browsers with no escapes */
\width: 570px; /* For IE5/Win */
w\idth: 520px; /* For good browsers */
padding-left: 40px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 10px;
background-image: url(images/aceofspades.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: left;
vertical-align: top;
font-weight: bold;
font-style: italic;
}
img {
border: none;
}
Website: http://2htts.com/CATBlog CSS: http://2htts.com/CATBlog/skins/default/CATBlog0.1.css Problem: Firefox displays this site, basically perfect, except for a space at the top of the page, above the header. IE and NN each have a fair number of problems. I've grabbed much of my CSS from various places. I have to admit, my eyes are sore and tired, and I'm a bit frustrated, trying to find what the problems are. Not that I'm any expert at cross-browser hacks for CSS, anyway... Any help is greatly appreciated. |
|||||||