|
CSS - Ie7 (and Older) & Safari (mac) Compatibility Issues
I'm working on a site and am getting some margin errors in the header. It all is aligned in Chrome, FF, IE8, Safari on Windows, etc... but IE7 or earlier and Safari on mac is not aligning the margins properly.
the part that is messed up is what is labeled as desc2 in the header section. It won't left (or even right) align. In the problem browsers, it sends the text off to the center of the header. it would make much more sense if I could show you, but apparently I'm not allowed to post links. anyone have any suggestions? Here is the code section i'm working with: <code>/***** Header ********************/ #header { margin: 0 auto 0; padding: 0; height: 42px; } #desc2 { color: #000000; font-size: 18px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; float: right; margin: 0 290px 10px 0; } #header .wrap { width: 840px; height: 10px; margin: 0 auto 0; } </code> Similar TutorialsI posted a temp URL for a site he http://www.welcome-home-interiors.net/index2.php I'm having three issues, and I hope someone can help out with one (or all): If you're resolution is higher than 1024x768 resolution, the site appears fine, but if you're at 1024x768 or lower, the page does not scroll. Another issue is that in IE6 & 7 the navigation tabs work fine, but in Firefox all you see is the "HOME" tab (no other ones). The final issue is that in IE6 the main content's text is right up against the main content's picture, but in IE7 & Firefox THAT issue is fine. Here is a link to the CSS file that I'm using: http://www.welcome-home-interiors.n...udes/styles.css Thanks so much for any help that can be offered!... Hello, newbie he I'm helping a friend redesign his website, and I'm having a few problems regarding the look across different browsers. I'm kinda new to CSS, so any help would be awesome! http://www.manplusrocks.com/MAVIN/template.html http://www.manplusrocks.com/MAVIN/css/mavin.css The site looks just fine on IE 6.0 (except for a little gap that the Javascript leaves on the top image), and other browsers seem to be ignoring certain DIV tags. I don't know if they are ID'd incorrectly or if it's another issue... Any comments would be greatly appreciated, thanks! sean.dynahosting.net/wordpress ^if you open this in firefox, It is almost exactly how I want, but when you open it in ie, all sorts of troubles arise. Most importantly, the meat of the page (everything except the header and footer) are not centered, and are not 60% of the page, like this: .basic{ font-family: courier new,courier,monotype; font-size: 11px; width: 60%; margin-left: 20%; } says. How much more simply can I put it? Is there anything I can do to fix this, or if not, is there anyway to get browser specific with css? Hi All, It's been quite some time since I've posted in this forum! I have a couple of mixed issues that I was hoping for some brain power on: All question pertain to minor (or large) problems with the following website: Bertelsen.ca There is a gap between the top of my content div and the header (literally #header and #content), I cannot, for the life of me, figure out what is causing it. Even tricks like "* {margin:0px, padding:0px;}" aren't working. It's probably some ridiculous block level element that pushes something else down or applies padding in a manner that it shouldn't. In IE the bullets for my lists at the very bottom do not show up. If anyone can think of what's causing this I'd love to hear about it. Cheers, BEB Hi. I just discovered that my site has issues in Safari. Everything is fine in FF. Take a look in safari: bestplaceon.net. 1. Gallery thumbnails are all over the layout. 2.Right upper corner Google Plus is gone. 3.Text size is to big for Safari I have tried different ways to fix this problem but without success. Every help would be nice. Thank you! It seems like I must be getting close to what I want. This page displays almost perfectly in Firefox and IE8, as well as most browsers, but not in older IE and Safari. hangemhightaxidermy.com/construction_slides2.htm I would like to eliminate the brown space above the sliding photos, but can't figure out how to do it. After trying all sorts of padding and margin changes, I've decided we can live with it if necessary. The space entered the picture when I used a table to align two unordered lists in a row (one for the text bullets, one for the sliding photos). Before that I just had the sliding photo unordered list and there was no extra brown space. If you view the landscape tab you will see what it looks like with both lists and no table. yikes! My bigger problem is that this whole middle section is shifting far to the right in IE7, IE6, and Safari. I have looked into haslayout stuff, but honestly I'm an old self-taught web dev mom just getting back into design for a family member after being out for 10 years. There's a lot of new stuff!! Fun, but frustrating. Don't laugh too hard looking at my css. I have been using the W3 validators to help, but maybe an experienced person can see my issue. My brain/eyes are kind of glazed over at this point. Hey...this may possibly be a dumb question; I'm still pretty much a complete n00b at HTML/CSS and this is only the second site I've really tried to code. I haven't tried to deal with cross-browser compatibility in IE yet so I'm sure it looks completely whack there, but I've been surprised by issues I've been having between FF, Safari, and Opera -- it was my understanding that those three browsers read things pretty much the same. Basically, the site has a bunch of horizontal dropdown menus (uls with li:hover functions). Here's the relevant code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>Star Trek: Andromeda</title> <link rel="stylesheet" type="text/css" href="http://www.trekandromeda.com/home.css" /> </head> <body> <!-- Menu --> <div id="bg"> <div id="home"><ul id="menu"><li><a href="http://www.trekandromeda.com/home.html"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a> <ul class="marginone"> <li><a href="http://www.trekandromeda.com/home.html">Site Home</a></li> <li><a href="http://forums.sb254.com/index.php?f=686">STA Forums</a></li> <li><a href="http://www.sb254.com/">FSF Home</a></li> </ul></li></ul></div> <div id="news"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a> <ul class="marginone"> <li><a href="http://www.trekandromeda.com/news.html">Recent News</a></li> <li><a href="http://www.trekandromeda.com/awards.html">Game Awards</a></li> </ul></li></ul></div> <div id="info"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton2.png"></i></a> <ul class="margintwo"> <li><a href="http://www.trekandromeda.com/chat.html">Chat Room</a></li> <li><a href="http://www.trekandromeda.com/odysseyplot.html">STA Plot</a></li> <li><a href="http://www.trekandromeda.com/odysseycrew.html">STA Crew</a></li> <li><a href="http://www.trekandromeda.com/staff.html">STA Staff</a></li> <li><a href="http://www.trekandromeda.com/join.html">Join</a></li> </ul></li></ul></div> <div id="tech"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/images/menubutton.png"></i></a> <ul class="marginone"> <li><a href="http://www.trekandromeda.com/ships.html">Ships</a></li> <li><a href="http://www.trekandromeda.com/equipment.html">Fleet Tech</a></li> <li><a href="http://www.trekandromeda.com/science.html">Science Docs</a></li> </ul></li></ul></div> <div id="andromeda"><ul id="menu"><li><a href="#"><i><img src="http://www.trekandromeda.com/Temp/menubutton2.png"></i></a> <ul class="marginthree"> <li><a href="http://www.trekandromeda.com/races.html">Xenobiology</a></li> <li><a href="http://www.trekandromeda.com/maps.html">Stellar Cartography</a></li> </ul></li></ul></div> </div> </body></html> And the CSS: Code:
body
{background: #000000;
width: 1228px;
font-family: Arial;}
/* MENU */
#bg
{background: #000000;
background-image: url("http://www.trekandromeda.com/Temp/blue3.png");
background-repeat: no-repeat;
height: 700px;
}
#home
{position: absolute;
left: -7px;}
#news
{position: absolute;
left: 207px;}
#info
{position: absolute;
left: 420px;}
#tech
{position: absolute;
left: 725px;}
#andromeda
{position: absolute;
left: 925px;}
ul#menu{
position: relative;
top: 240px;
text-decoration: none;
opacity: 100;
list-style: none;}
ul#menu li {
float: left;
position: relative;
width: 108px;
list-style: none;
top: auto;
left: auto;}
ul#menu li a img {
position: relative;
opacity: 0;}
ul#menu li ul {
position: relative;
display: none;}
ul#menu li ul.marginone li {
float: left;
position: relative;
font-variant: small-caps;
margin-left: -43px;}
ul#menu li ul.margintwo li {
float: left;
position: relative;
font-variant: small-caps;
margin-left: 25px;}
ul#menu li ul.marginthree li {
float: left;
position: relative;
font-variant: small-caps;
margin-left: -50px;
width: 240px;}
ul#menu li:hover ul {
position: relative;
display: block;
margin-top: -5px;
}
ul#menu li:hover ul li {
float: left;
position: relative;
padding: 5px;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #000000;
height: 20px;
border: 1px solid #54A2E2;
z-index: 1000;
}
ul#menu li ul li:hover {
float: left;
position: relative;
display: block;
color: #000000;
background: #54A2E2;
border: 1px solid #54A2E2;}
/* Links */
a:link {text-decoration: none; color: inherit;}
a:visited {text-decoration: none; color: inherit;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
In Firefox (and in Opera, although the placement is a little funky) the dropdown menus have an li:hover effect which changes the color of the one which is being hovered over. However, this is not working in Safari and I'm not entirely sure why. Does anyone have any ideas on what I can do to fix this? Thanks! Hi There, I added a css dropdown menu to a dev site I am working on and although it works just fine in IE7 and FF it is broked in IE 6 & < Here is the page It seems that the IE conditional statements are kicking in for browsers older than and including IE6, but it just busts the menu - I've tried all sorts but to no avail. It is the 'browse' menus. Any pointers would be greatly appreciated Hi, I'm working on a full CSS-based layout: http://www3.telus.net/mguzman/testnewsite/ I just have a few questions though. Obviously, NN4, being the .... browser that it is won't really display CSS correctly at all - I've stuck in a DIV that is hidden using CSS that basically tells the user to upgrade to Mozilla or Opera. Is this considered good practice and professional? How else can one deal with standards-incompliant browsers like NN or IE? Please keep in mind that this layout may be used as a design for a business. Also, in IE 5.0 (5.5 seems okay) and IE 4.x, the page displays *mostly* correctly, except that the DIV with the content is shifted down till after the floated left menu. Any suggestions on how this can be solved while still maintaining compatibility with other platforms? In NN 6, it appears that the background (and/or background-image) CSS properties aren't supported. Generally, how is this issue dealt with? Thanks so much! ^^ I run http://www.licklinux.com and the site has been designed to fit most browsers. Such as Gecko (e.g. Firefox), IE, Opera, even Lynx e.t.c. Though in older versions of IE, the sidebar has an awfully ugly blank right-margin. I can't seem to fix this problem, and by viewing my stats 17% use these non-compatible browsers. Can someone please help me? I usually figure CSS problems out myself, but now I'm totally lost... I just finished modifying an open CSS/XHTML webpage and it displays perfectly on IE7. When the page is viewed on other IE versions, it is completely jumbled (i.e. footer at top of page, hover boxes on navigation bar take up whole screen, borders exceed defined 1000px, etc.) I am a novice at CSS and am having difficulty fixing these issues. Any help would be greatly appreciated. I'v attached screen shots of the correct and incorrect layouts. I have 2 css formatting files: setup and text Here's SETUP.CSS: /* NON-HEADER */ *{padding:0; margin:0;} body {font-size:62.5%; background:rgb(250,250,250) url(../img/bg_sides.gif); font-family:Verdana,arial,sans-serif; margin-bottom:40px} /*Font-size: 1.0em = 10px when browser default size is 16px*/ .page-container {width:1000px; margin:0px auto; margin-bottom:25px; font-size:1.0em;} .page-footer {width:1000px; margin:0px auto; margin-top:20px; margin-bottom:10px; font-size:1.0em; text-align:center;} .main {clear:both; width:1000px; padding-bottom:30px; background:rgb(255,255,255); top left repeat-y;} .main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .main-content {display:inline; /*Fix IE floating margin bug*/; float:left; width:940px; margin:30px 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .footer {clear:both; width:1000px; padding:1.0em 0 1.0em 0; background:transparent; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} /* --- For alternative headers START PASTE here --- */ /* HEADER */ .header {width:1000px; font-family:"TREBUCHET MS",arial,sans-serif;} .header-top {width:1000px; height:100px; background:rgb(195,0,0); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-middle {width:1000px; height:30px; background:transparent; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-bottom {width:1000px; height:300px; background:rgb(204,0,0) repeat-y;} .header-breadcrumbs {clear:both; width:1000px; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(../img/bg_head_breadcrumbs.jpg) repeat-y;} /*******************/ /* HEADER SECTION */ /*******************/ .sitelogo {width:400px; height:100px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); } .sitepic {width:1000px; height:300px; position:absolute; z-index:1; background:url(../img/header-logo.jpg); }.sitename {width:300px; height:45px; position:absolute; z-index:1; margin:20px 0 0 90px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .sitename h1 {font-size: ;} .sitename h2 {margin:-4px 0 0 0; color:rgb(125,125,125); font-size:120%;} .sitename a {text-decoration:none; color:rgb(125,125,125);} .sitename a:hover {text-decoration:none; color:rgb(50,50,50);} .nav0 {width:350px; position:absolute; z-index:2; margin:25px 0 0 0; margin-left:550px !important /*Non-IE6*/; margin-left:553px /*IE6*/;} .nav0 ul {float:right; padding:0 20px 0 0;} .nav0 li {display:inline; list-style:none;} .nav0 li a {padding:0 0 0 3px;} .nav0 a:hover {text-decoration:none;} .nav0 a img {height:14px; border:none;} .nav1 {width:350px; position:absolute; z-index:3; margin:10px 0 0 650px;} .nav1 ul {float:right; padding:0 15px 0 0; font-weight:bold;} .nav1 li {display:inline; list-style:none;} .nav1 li a {display:block; float:left; padding:2px 5px 2px 5px; color:rgb(255,255,255); text-decoration:none; font-size:100%;} .nav1 a:hover {text-decoration:none; color:rgb(145,145,145);} .sitemessage {width:400px; height:120px; position:absolute; z-index:1; margin:30px 0 0 480px; color:rgb(234,239,247); /*overflow:visible !important /*Activate if Firefox print problems*/; overflow:hidden /*IE6*/;} .sitemessage h1 {width:400px; text-align:right; font-size:230%;} .sitemessage h2 {float:right; width:320px; margin:8px 0 0 0; text-align:right; line-height:100%; font-size:160%;} .sitemessage h3 {float:right; width:320px; margin:10px 0 0 0; text-align:right; font-size:140%;} .sitemessage h3 a {text-decoration:none; color:rgb(234,239,247);} .sitemessage h3 a:hover {text-decoration:none; color:rgb(50,50,50);} /*Drop-down menu*/ .nav2 {float:left; width:1000px; border:none; background:transparent url(../img/nav-bar-main.jpg) no-repeat; color:rgb(255,255,255); font-size:110%;} /*Color navigation bar normal mode*/ .nav2 ul {list-style-type:none;} .nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; } .nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(255,255,255);} .nav2 ul li ul {display:none; border:none;} /*Non-IE6 hovering*/ .nav2 ul li:hover a {background-color:rgb(210,210,210); border: solid 1px rgb(130,130,130); text-decoration:none; color:rgb(80,80,80);} /*Color main cells hovering mode*/ .nav2 ul li:hover ul {display:block; width:140px; position:absolute; z-index:999;} .nav2 ul li:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/ .nav2 ul li:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/ /*IE6 hovering*/ .nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;} .nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none; border: solid 1px rgb(130,130,130); color:rgb(80,80,80);} /*Color main cells hovering mode*/ .nav2 ul li a:hover ul {display:block; width:140px; position:absolute; z-index:999;} .nav2 ul li a:hover ul li a {display:block; width:140px; height:auto; line-height:1.3em; padding:4px 16px 4px 16px; margin-top:-2px; border-left:solid 1px rgb(130,130,130); border-bottom: solid 1px rgb(130,130,130); background-color:rgb(210,210,210); font-weight:bold; color:rgb(80,80,80);} /*Color subcells normal mode*/ .nav2 ul li a:hover ul li a:hover {background-color:rgb(204,0,0); text-decoration:none; color:rgb(255,255,255);} /*Color subcells hovering mode*/ .header-top .searchform {float:right; width:285px; padding:0 17px 0px 0px !important /*Non-IE6*/; padding:0 12px 0px 0px /*IE6*/;} .header-top .searchform form fieldset {float:right; border:none;} .header-top .searchform input.field {width:10.0em; padding:0.2em 0 0.2em 0; font-family:verdana,arial,sans-serif; font-size:120%; } .header-top .searchform input.button {width:3.0em; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:transparent url(../img/search-button.gif); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:120%;} .header-top .searchform input.button:hover {cursorointer; background:transparent url(../img/search-button.gif);} /******************/ /* MAIN SECTION */ /******************/ /* MAIN CONTENT */ .column1-unit {width:950px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column2-unit-left {float:left; width:600px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column2-unit-right {float:right; width:300px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column3-unit-left {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} .column3-unit-middle {float:left; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/; margin-left:50px;} .column3-unit-right {float:right; width:283px; margin-bottom:10px !important /*Non-IE6*/; margin-bottom:5px /*IE6*/;} /********************/ /* FOOTER SECTION */ /********************/ .footer p {line-height:1.3em; text-align:center; color:rgb(125,125,125); font-weight:bold; font-size:110%;} .footer p.credits {font-weight:normal;} .footer a {text-decoration:underline; color:rgb(125,125,125);} .footer a:hover {text-decoration:none; color:rgb(0,0,0);} .footer a:visited {color:rgb(0,0,0);} /******************/ /* CLEAR FLOATS */ /******************/ .page-container:after, .header:after, .header-breadcrumbs:after, .main:after, .main-content:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .column1-unit:after, .column2-unit-left:after, .column2-unit-right:after, .column3-unit-left:after, .column3-unit-middle:after, .column3-unit-right:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .footer:after, p:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .clear-contentunit {clear:both; width:940px; height:0.1em; border:none; background:rgb(210,210,210); color:rgb(210,210,210);} Here's TEXT.CSS: /******************/ /* MAIN SECTION */ /******************/ /* MAIN CONTENT */ .main-content h1.pagetitle {margin:0 0 0.4em 0; padding:0 0 2px 0; border-bottom:solid 7px rgb(225,225,225); font-family:"georgia",arial,sans-serif; color:rgb(100,100,100); font-weight:bold; font-size:220%;} .main-content h1.block {clear:both; margin:1.0em 0 0em 0; padding:2px 0 2px 2px; background:rgb(190,190,190); font-family:"georgia",arial,sans-serif; color:rgb(255,255,255); font-weight:bold; font-size:220%;} .main-content h1 {clear:both; margin:1.0em 0 0.5em 0; font-family:"georgia",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:210%;} .main-content h2 {clear:both; margin:1.0em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(80,80,80); font-weight:normal; font-size:170%;} .main-content h3 {clear:both; margin:-.5em 0 0.5em 0; font-family:"Verdana",arial,sans-serif; color:rgb(125,125,125); font-weight:normal; font-size:130%;} .main-content h1.side {clear:none;} .main-content h2.side {clear:none;} .main-content h3.side {clear:none;} .main-content h4 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:170%;} .main-content h5 {margin:1.5em 0 1.0em 0; color:rgb(80,80,80); font-family:"Verdana",arial,sans-serif; font-size:140%;} .main-content h6 {clear:both; margin:0 0 .25em 0; line-height:1em; font-family:"Verdana",arial,sans-serif; font-weight:normal; font-size:100%;} .main-content p {margin:0 0 1.0em 0; line-height:1.5em; font-size:120%;} .main-content p.center {text-align:center;} .main-content p.right {text-align:right; margin-right: 10px} .main-content p.details {clear:both; margin:-0.25em 0 1.0em 0; line-height:1.0em; font-size:110%;} .main-content blockquote {clear:both; margin:0 30px 0.6em 30px; font-size:90%;} .main-content table {clear:both; width:880px; margin:2.0em 0 0.2em 20px; table-layout: fixed; border-collapse:collapse; empty-cells:show; background-color:rgb(233,232,244);} .main-content table th.top {height:3.5em; padding:0 7px 0 7px; empty-cells:show; background-color:rgb(175,175,175); text-align:left; color:rgb(255,255,255); font-weight:bold; font-size:110%;} .main-content table th {height:3.0em; padding:2px 20px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; color:rgb(80,80,80); font-weight:bold; font-size:110%;} .main-content table td {height:3.0em; padding:2px 7px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; font-weight:normal; color:rgb(80,80,80); font-size:110%;} p.caption {clear:both; margin:0.5em 0 2.0em 20px; text-align:left; color:rgb(80,80,80); font-size:110%;} .main-content ul {list-style:none; margin:0.5em 0 1.0em 0;} .main-content ul li {margin:0 0 0.2em 2px; padding:0 0 0 12px; background:url(../img/bg_bullet_full_1.gif) no-repeat 0 0.5em; line-height:1.4em; font-size:120%;} .main-content ol {margin:0.5em 0 1.0em 30px !important /*Non-IE6*/; margin:0.5em 0 1.0em 35px /*IE6*/;} .main-content ol li {list-style-positionutside; margin:0 0 0.2em 0; line-height:1.4em; font-size:120%;} .contactform {width:418px; margin:2.0em 0 0 0; padding:10px 10px 0 10px; border:solid 1px rgb(200,200,200); background-color:rgb(240,240,240);} .contactform fieldset {padding:20px 0 0 0 !important /*Non-IE6*/; padding:0 /*IE6*/; margin:0 0 20px 0; border:solid 1px rgb(220,220,220);} .contactform fieldset legend {margin:0 0 0 5px !important /*Non-IE*/; margin:0 0 20px 5px /*IE6*/; padding:0 2px 0 2px; color:rgb(80,80,80); font-weight:bold; font-size:130%;} .contactform label.left {float:left; width:100px; margin:0 0 0 10px; padding:2px; font-size:110%;} .contactform select.combo {width:175px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .contactform input.field {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .contactform textarea {width:275px; padding:2px; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .contactform input.button {float:right; width:9.0em; margin-right:20px; padding:1px !important /*Non-IE6*/; padding:0 /*IE6*/; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;} .contactform input.button:hover {cursor: pointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);} .loginform {width:160px; margin:-10px 20px 0 20px;} .loginform p {clear:both; margin:0; padding:0;} .loginform fieldset {width:160px; border:none;} .loginform label.top {float:left; width:125px; margin:0 0 2px 0; font-size:110%;} .loginform label.right {float:left; width:125px; margin:5px 0 0 0; padding:0 0 0 3px; /*IE6*/; font-size:110%;} .loginform input.field {width:158px; margin:0 0 5px 0; padding:0.1em 0 0.2em 0 !important /*Non-IE6*/; padding:0.2em 0 0.3em 0 /*IE6*/; border:solid 1px rgb(200,200,200); font-family:verdana,arial,sans-serif; font-size:110%;} .loginform input.checkbox {float:left; margin:5px 0 0 0 !important /*Non-IE6*/; margin:2px 0 0 -3px /*IE6*/; border:none;} .loginform input.button {float:left; width:5.0em; margin:10px 0 5px 0; padding:1px; background:rgb(230,230,230); border:solid 1px rgb(150,150,150); text-align:center; font-family:verdana,arial,sans-serif; color:rgb(150,150,150); font-size:110%;} .loginform input.button:hover {cursorointer; border:solid 1px rgb(80,80,80); background:rgb(220,220,220); color:rgb(80,80,80);} /********************/ /* COMMON CLASSES */ /********************/ .main img {clear:both; float:left; margin:3px 10px 7px 0; padding:1px; border:1px solid rgb(150,150,150);} .main img.center {clear:both; float:none; display:block; margin:0 auto; padding:1px; border:1px solid rgb(150,150,150);} .main img.right {clear:both; float:right; margin:3px 0 7px 10px; margin-right:10px; padding:1px; border:1px solid rgb(150,150,150);} .main a {color:rgb(70,122,167); font-weight:bold; text-decoration:none;} .main-content h1 a {color:rgb(70,122,167); font-weight:normal; text-decoration:none;} .main a:hover {color:rgb(42,90,138); text-decoration:underline;} .main a:visited {color:rgb(42,90,138);} .main a img {border:solid 1px rgb(150,150,150);} .main a:hover img {border:solid 1px rgb(220,220,220);} I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Okay I have this website www.deminyx.com and It looks decent in Google Chrome but stupid in IE my #content div is in a different place, can anyone help me clean up my code. I validated the HTML and CSS with the w3c validator too! UGHH lol! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Deminyx| Web Solutions</title><link rel="stylesheet" href="index.css" type="text/css"> </head><body> <div id="header"><a href="index.html"> Deminyx</a></div> <div id="side"> <table> <tbody> <tr> <td><a href="service.html">The Service</a></td> </tr> <tr> <td><a href="cost.html">The Cost</a></td> </tr> <tr> <td><a href="ease.html">The Ease</a></td> </tr> </tbody> </table> </div> <div id="content">This is my content, I wont waste your time.</div> </body></html> and the CSS Code:
body {
background-color:#666;
}
#header {
background-color:#399;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:7em;
border-style:solid;
border-width:2px;
}
a:hover {
font-family:Arial,Helvetica,sans-serif;
background-color:#399;
}
a {
text-decoration:none;
color:#000;
font-size:1em;
line-height:1em;
}
table {
border:solid #000;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
line-height:2.2em;
width:20%;
font-size:1.5em;
margin-top:12px;
padding:2px 2px 2px 19px;
}
#content {
position:relative;
float:right;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
width:78%;
font-size:1.2em;
margin-top:-160px;
border-style:solid;
padding:4px 4px 4px 8px;
}
I just finished a layout using CSS and I'm aware that browsers 4.0 and earlier (or is it 3.0 and earlier?) won't be able to display it right. However, I also know that the browsers that do support CSS don't all display it the exact same way. I tested my layout using Internet Explorer 6 and Mozilla 1.6. I had to make a few changes to get Mozilla to display it close to what I intended. My question: which other browsers and versions should I test it on? A friend told me that css websites are sometimes displayed wrong with some browsers; the tables are out of place etc. Is this true? are there any issues with certain sites? Is css the best way to design an html site now a days? Sorry im a newbie in this, Im going to start learning soon. Thanks !!! I have always encountered problems trying to get my sites to work in IE6, mainly because it renders the margins as 2x the "right value". However I am curious: How does deliciousdays.com work perfectly in IE6 without using if IE6 conditional tag? I am making a site and this would be very useful. I try not to use the if IE6 conditional tag hack if possible. I'm working on reworking my flash site into a CSS/HTML site. Tired of dealing with flash. Anyways....I am working on this page currently and am having trouble getting 3 divs to line up properly in IE. They look great in Firefox! Take a look and let me know if you have any ideas. Any help is much appreciated. Here's the link www .crealities.com/2008/inspiration.htm |
|||||||