|
CSS - Displaying Of Css In Older Browsers (<=ie5.0, <=nn4.78)
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! ^^ Similar TutorialsI 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 have a small box displayed at the top of the page for an "anouncment column". Opera and IE show it properly, sort of, and NEtscape/mozilla show it further down the page. I want it to be at the VERY top of the page, IE/Opera show it a few px down and mozilla/netscape show it a good 10+ down. I have tried playing with padding and it made no difference. These browsers are the new versions. any ideas? Code: <div style="position: absolute; left: 617px; top; 0px; width: 147px; height: 30px; background-color: transperant; padding: 0px;"> <h5>text is here</h5> </div> the style sheet Code: body {
color: #000000;
background-color: #ffffff;
font-family: Georgia, "Times New Roman",
Times, serif;
}
}
h1 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 30px }
h2 {
FONT-WEIGHT: bold;
text-align: center;
font-size: 25px }
h3
{
FONT-WEIGHT: bold;
text-align: center;
font-size: 20px }
h4
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 15px }
h5
{
padding: 0px;
FONT-WEIGHT: normal;
text-align: center;
font-size: 12px }
h6
{
FONT-WEIGHT: normal;
text-align: center;
font-size: 9px }
p {
FONT-WEIGHT: normal;
text-align: left;
FONT-WEIGHT: normal;
color: #000000;
font-size: 12px }
hr {color: #7d7c7c }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.capitalize {text-transform: capitalize}
A:visited {
COLOR: #802CFF; TEXT-DECORATION: underline
}
A:link {
COLOR: #2C31FF; TEXT-DECORATION: none
}
A:hover {
COLOR: #719FFE; TEXT-DECORATION: underline
}
A:active {
COLOR: #2C31FF; TEXT-DECORATION: underline
}
Hi guys, Bit of an annoying problem here, Ive got this navbar up and running using image rollovers, and it works fine in IE, however if firefox and safari it displays wrong, heres my code and what happens, Thanks in advance, Scott. HTML: Code: <div class="navbar"> <ul id="navlist"> <li><a href="./shop">SHOP NOW</a></li> <li><a href="index.php">HOME</a></li> <li><a href="contact.php">CONTACT</a></li> <li><a href="faq.php">F.A.Q.</a></li> </ul> </div> CSS: Code: .navbar {
font-family:Impact;
font-size: 23px;
text-align:center;
height:54px;
}
.navbar li {
list-style:none;
display:inline;
}
.navbar a {
width:198px;
color:#FFFFFF;
background:url("rollover.gif") no-repeat;
padding:12px 10px 13px;
margin:0 0px;
}
.navbar a:hover {
background-position:0 -59px;
color:#000000;
}
.navbar a:active {
background-position:0 -118px;
color:#FFFFFF;
}
Displayed in IE: URL Displayed in FF/Safari: URL 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... 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 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> Hi, targeting both IE and FF i seem to experience compatibility issues ... The CSS design on IE looks perfect, but same JSPs on FF gives a little bit of dull on colors (or fade) ... I also found some strange behavior in FF on my struts application which i don;t see when testing on EE. Sometimes a page reloads itself on submit... Any issues around this? Oh, i know blinking text is not adviced, but can't seem to get it to work either (using CSS text-decoration : blink) Thanks for your help Hi All, Just in the middle of designing a website for my personal hobbies. I have used alot of CSS to create the layout of the page. The problem being it looks perfect in Firefox, Opera, Seamonkey etc etc BUT NOT IE!!! In IE it is all over the place, nothing is where it should be. I checked my CSS against w3 validator, and it came back with a few errors, so i decided to fix them... it then looked even worse... in ALL BROWSERS! So i decided to go back to how i had it originally. The site in question is my username. You can access the css stylesheet file by adding /test.css to the end of the domain name. Any information, or anyone else had problem like this? All the best for now, Mike I have a three column (25% - 50% - 25%) page layout via CSS which works perfect in IE. But it does not work in Firefox. Here is my CSS code. #leftColumn { float:left; width:25%; margin: 5px 3px 0px; padding: 0; } * html #leftColumn { width:25%; } #rightColumn { float:right; width:25%; margin: 5px 2px 0px 3px; padding: 0; } * html #rightColumn { width:25%; } #main3Column { margin:5px 25% 5px 25%; padding: 0; /* 50% or auto or no width does not work in IE. 100% here is the remaining of the available after left and right columns */ width:100%; } The ID 'main3Column' is for the middle column. Width: 100% works fine in IE as it excludes 25% for left and 25% for right and 100% of whatever remaining for the middle column. But in Firefox, middle column is taking 100% of the screen width instead of the remaining after left and right columns. Is it possible to come up with a code which works for both IE and CSS ? Please help. Hi all, I have several CSS files to look after different browsers, but I use javascript to match the IE css with IE browsers, etc. Can you only have one CSS file that looks after ALL browsers? So that if the user doesn't have javascript it's not a problem? I've heard of css hacks and css filters being used but I'm not all that familiar. Ben good day looking for some css that is compeltely compatable among all major browsers.. namely firefox, ie, safari, and opera.. i've been searching all over the net and forums for css, but cant find any.. i just want a simple 3 column layout, with the middle column being auto width, and left and right fixed width.. can someone point me in the right direct? Hey All: Its that time again- testing my pages in different browsers. I have browser cam for another 7 hours, this is my snapshot of the page I am testing. Ok, this is the first time I am testing my code. Any reason why older browsers are not interpreting my CSS correctly? Maybe something I should know about older browsers. Any feedback is helpful- thanks Hi, I have been thinking about this cross browser problem. Is there a list of things that FireFox can do and IE can't (plus other browsers) in CSS. It would be great if somewhere on the net there would be a list of these things so i could use it as a cross refferance. . At the mo i just use trial and error but th\at means spending hours to get designs just right Thanks Hi all, I seem to be stumped on something that is probably simple. At this test site you'll notice the left nav area as well as the text content area. I am trying to set it up so that both are 6 pixels below the header image. Obviously, then they would be even with each other. Everything I've tried has come close but never right in both FF & IE. Could someone please give me a hand with this? Thanks! Chris Hi all, Compatibility with different browsers, link one and link looks good in ie but gets overlap in Firefox and too far apart in Opera. Does anyone know how to make this menu compatible with a least these tree browsers. Any help is greatly appreciated thanks. Code:
<style type="text/css">
ul { list-style-type: none; margin: 1.0em 0 0 30px; padding: 0; position: relative; overflow: visible; height: auto; }
ul li { height: 1.6em; width: 230px; }
ul li a, ul li a:visited { width: 200px; display: block; color: black; text-decoration: none; background: yellow; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px;}
ul li a:hover { display: block; background: green; color: black; }
ul li a.currentpage, ul li a.currentpage:visited { background: red; color: black; padding: 3px;}
</style>
<ul>
<li><a href="menu3.html" class="currentpage">Main page </a></li>
<li><a href="page2.html">Dummy page 2</a></li>
</ul>
I'm in the process of revamping my website and am trying to use css to position things. I've used browsershots to view what the website looks like in different browsers and platforms. All is well with one exception, IE6! Grrr. Now I'm a total css newbie so what I'm doing wrong is probably painfully obvious to you guys, but I've been beating my head against this for a while now and would appreciate it if someone could take a look over my shoulder and see if they can spot the problem. If you use IE6 you'll notice that the featured products are listed below the last 'service ad' image instead of at the top of that 'column' even with the first 'serivce ad' image. Again, any help in diagnosing/fixing this issue is greatly appreciated! Here's a link to the page: http://www.decaldepot.net/zencart/index.php My web site (URL address blocked: See forum rules) is causing me problems with CSS since I have reworked it. If you look at my web pages in Internet Explorer they look perfect. In Firefox when loading some of the pages the top logo blinks and takes a few seconds to load. In Opera some pages move slightly to the right. I know the problem is related to the length of the center div but I have no idea how to fix this unless I make the small centers longer. Also my previous version of this site just used one image. Logo.gif was in the background. I have put Logo.gif in the header and have used GREEN.jpg as my background now. MY CSS body { background-image: url(../images/GREEN.jpg); } div.container { position: relative; margin: 0 auto; width: 746px; height: 840px; } #header { height: 100px; width: 746px; background-image: url(../images/Logo.gif); background-repeat: no-repeat; background-position: 50% 0%; } #nav { position: absolute; top: 110px; left: 55px; height: 20px; width: 640px; } #left { position: absolute; top: 160px; left: 0px; width: 124px; } #center { position: absolute; top: 160px; left: 130px; width: 441px; height: auto; border: solid; } /* right div at this time has been made invisible. Maybe later add Flash content*/ #right { position: absolute; top: 160px; left: 600px; width: 130px; height: 100px; } /* this div belongs on photo pages and shows the alphabet on the right.Takes place of right div */ #navalpha { position: absolute; top: 160px; left: 600px; width: 100px; height: 130px; font-family: "Courier New", Courier, monospace; border: solid; } /* Start of Top Menu*/ ul { list-style: none; margin: 0; padding: 0; font-size: .95em; } ul li { float: left; margin: 0; padding: 0; } ul li a { color: #777; display: block; text-align: center; text-decoration: none; width: auto; padding: 3px 5px 3px 5px; border-color: #191970; border-width: 1px 1px 1px 0; border-style: solid; } ul li.first a { border-width: 1px; } ul li a:hover { background-color: Fuchsia; color: Yellow; } /* end of Top Menu*/ /* start of side Menu*/ ul#navlist { width: 102px; padding: 0px; margin: 0px; border-left: thin solid Black; font-size: .95em; float: left; } ul#navlist li { list-style: none; margin: 0px; border: 0px; } ul#navlist li a { color: #777; width: 102px; padding: 2px 8px 2px 8px; border-color: #191970; border-width: 0px 1px 1px 0; border-style: solid; text-decoration: none; text-align: left; } ul#navlist li.topfirst a { border-top: 1px solid Black; } ul#navlist li a:link { color: Blue; } ul#navlist li a:hover { border-color: #191970; color: Red; background: Yellow; } ul#navlist li a:visited { color: Blue; } /* end of side Menu*/ p { text-align: left; margin: 0 10px 0 10px; } h1 { font-size: 1.05em; color: Navy; text-decoration: underline; font-style: italic; font-weight: bold; font-variant: small-caps; padding: 0px 0 6px 19px; border-bottom: 1px dashed navy; background: url(cube.gif) no-repeat 0 2px; margin: 0 10px 0 10px; } h2 { font-size: 1em; color: Navy; text-decoration: underline; font-style: italic; font-weight: bold; font-variant: small-caps; margin: 0 10px 0 10px; } h3 { font-size: .9em; color: Navy; text-decoration: underline; font-style: italic; font-weight: bold; font-variant: small-caps; margin: 0 10px 0 10px; } a:link { color: #0000FF; text-decoration: none; } a:visited { color: #0000FF; text-decoration: none; } a:hover { color: Red; text-decoration: none; } a:active { text-decoration: none; } /* ....................thumbnail determines how the small photos look */ .thumbnail { float: left; width: 83px; height: 115px; border: 1px solid #999; margin: 0px 15px 5px 0; padding: 5px; } /* .................thumbnailUnitBoard determines how the photos look on Unit Board page */ .thumbnailUnitBoard { float: left; width: 220px; margin: 0px 15px 15px 0; padding: 5px; } Hello, I've got a question about CSS3. That are the correct procedures to make my CSS code compatible with all the browsers ? For example, I want that the elements of my website stay identicals on all the browsers. Thank you in advance ! I've been having a hard time with browser compatibility and I need a bit of help. This is what I'm trying to acheive. It's a link bar on top and then a page that contains left and right headers, dividers and content plus a footer (height is not an issue right now). I would like the #page to have a 2px border and every element inside to have a white 2px padding. It seems that in IE, if I set #page with a 2px padding, I get exactly what I want but Firefox does not interpret it the same way. Is there a hack/workaround for this. I've attacned a picture of what I'm trying to get at. Thanks Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css"><!--
html, body {
margin:0;
padding:0;
height:100%;
}
div {
margin:0;
padding:0;
}
div#holder {
margin:auto;
margin:auto;
width:800px;
height:100%;
background:black;
}
div#links {
width:auto;
height:30px;
background:pink;
}
div#page {
width:auto;
height:100%;
background:white;
border:2px black solid;
padding:2px;
}
div#left {
float:left;
background:red;
width:180px;
}
div#right {
float:right;
background:blue;
width:610px;
}
div#footer {
clear:both;
width:auto;
height:30px;
background:green;
}
--/></style>
</head>
<body>
<div id="holder">
<div id="links">1</div>
<div id="page">
<div id="header">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="divider">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="content">
<div id="left">1</div>
<div id="right">1</div>
</div>
<div id="footer">1</div>
</div>
</div>
</body>
</html>
|
|||||||