CSS - Problems Ff And Ie Compatibilty On My Site
Hi there,
I am still new to css and have run into some problems that are frustrating me to no end! I have validated my html and css and still am not sure what to do with my problems. I am having two sets of problems: A) problems between IE and FF B) getting my nested list on the left side to work properly Site viewable he http://www.kohlrbaby.com/revisionbaby/about.html CSS viewable he http://www.kohlrbaby.com/revisionbaby/kohlrbaby.css A) There are two problems I can see: 1) IE: the photo is moved over a few pixels from the left forcing the other item out of line 2) FF: The white background has disappeared. B) For my nested list I have 2 issues: 1) I was trying to make the main list items have a custom bullet (arrow.gif) but I can't seem to get it to work. 2) As well, I can't figure out how to get the list to move to the left and the sub list to be less indented Thank you! Jill Similar TutorialsHi there I have a small problem with my web site on IE, and Im sure it something to do with the css, any help will be appreciated. SEE BELOW FOR DETAILS MY WEBSITE Code: @charset "ISO-8859-1"; body {margin:0;padding: 0px;font-family: Verdana, sans-serif;font-size: 0.75em;text-align:center;background-image:url(../images/FaiGurFrontPageBg3.jpg);} .wrapper { width:914px; margin-left:auto; margin-right:auto; background-color:#FFF;} .mainimg { background-image:url(../images/LOL4.jpg); width:914px; height:239px;} .aboutimg { background-image:url(../images/LOL6.jpg); width:914px; height:239px;} .mainimg { background-image:url(../images/LOL4.jpg); width:914px; height:239px;} .mainimg { background-image:url(../images/LOL4.jpg); width:914px; height:239px;} .imgfist { background-image:url(../images/FistsInfo.jpg); width:914px; height:174px;} .imgfoot { background-image:url(../images/FootInfo.jpg); width:914px; height:174px;} .logform {width:914px; height:28px; text-align:left; background-color:#930; color:#FFF;} .logform form {width:770px; float:left; margin:0 0 0 0; padding:0 0 0 0;} .form1 {width:526px; margin-left:auto; margin-right:auto; } .form1 table {margin:0 0 0 0;} .form1 form { margin:0 0 0 0;} .regpic {background-image: url(../images/Reg%20Pic.jpg); width:526px; height:122px;} .term {font-size:11px;} #wrapper2 { background-image:url(../images/TermsPage.jpg); width:914px; } .menubar { width:914px; padding-left:78px; background-color:#933; height:30px; padding:0; text-align:center; } .menubar ul { margin:0 auto 0 auto; padding:0 0 0 0; text-align:center; display:inline; } .menubar ul li { display:inline; height:30px; float:left; list-style-type:none; font-size:12px; margin:0; text-align:center; padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; border-right:thin; border-right-color:#999; border-right-style:solid; } #wrapper2 { background-image:url(../images/TermsPage.jpg); width: 918px; height: 1548px;} .menubar ul li.first { border-left:thin; border-left-color:#999; border-left-style:solid; } .cent {margin-left:60px; margin-right:auto; text-align:center;} .menubar ul li a { text-decoration:none; padding:6px 0 0 0; margin:0 0 0 0; display:block; height:30px; color:#FFF;} .menubar ul li a:hover { text-decoration:none; padding:6px 0 0 0; margin:0 0 0 0; display:block; height:30px; color:#fff; background-color:#666} .flashdiv2 { overflow:hidden; margin:0 0 0 0 ; } .FlashVid { float:left; overflow:hidden; margin:0 0 0 0;} .leftbar { float:left; background-image:url(../images/RightbarNew.jpg); width:76px; height:630px; } .content { width:762px; height:630px; margin:0 0 0 0; padding:30px 0 0 0; float:left; background-color:#FFF; } .rightbar { float:left; background-image:url(../images/LeftbarNew.jpg); width:76px; height:630px; } .conttitle {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 18px;text-align:center;} .contbody {font-family: "Comic Sans MS", cursive;font-size: 18px;text-align:left;} .con {height:750px;} .footer {background-color:#FFF;margin-left:auto; margin-right:auto; width:914px;} .clear { clear:both} I have been working with css for a while but web design is just a hobby for me so I am not that good when it comes to advanced css. The problem that I am having is that IE is not rendering me page right and I am not sure if it also supports png transparency be cause me background images are not coming out right. Everything for this page work just right in FF but IE is a whole other story. So if somebody could check out my site and suggest changes that I could make so that it does work right in both that would be awesome. My Site and here is me css file css Code: Original - css Code /* Basic style sheet */ html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0px; padding: 0px; border: 0px; } body{ background-image: url(../images/thumbBG.gif); background-repeat: repeat; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; text-align: center; } #wrapper{ width: 800px; text-align: left; background-color: #1A1A1A; } #rightshadow{ width: 850px; margin-left: auto; margin-right: auto; background-image:url(../images/rightshadow.png); background-position: right top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #leftshadow{ padding-left: 25px; background-image: url(../images/leftshadow.png); background-position: left top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #banner{ height: 135px; background-position: center; background-repeat: no-repeat; background-image: url(../images/banner2.jpg); } #nav{ height: 10px; background-color: #000000; text-align: center; margin-bottom: 10px; } #nav ul{ padding: 0px; margin: 0px; background-color: #000000; } #nav ul li{ display: inline; padding: 0px; margin: 0px; } #nav ul li a{ font-size: 80%; color: #FFFFFF; background-color: #000000; text-decoration: none; padding: 0px 25px 0px 25px; text-align: center; width: 9em; } #nav ul li a:hover, #nav ul li a:focus{ background-color: #D0EB5A; color: #000000; } #usepic{ height: 110px; width: 104px; border: 1px solid #000000; background-color: #000000; margin-top: 5px; margin-bottom: 15px; margin-left: 5px; } #user{ float: left; width: 115px; background-color: #000000; text-align: center; margin-top: 10px; margin-left: 13px; } /* html div#user { width: 20px; top: 38px; left:20px; position:absolute; }*/ #content{ margin-top: 10px; margin-right: 23px; margin-bottom: 4px; float: right; width: 625px; } .containAll{ background: #000000; margin-bottom: 10px; } .container{ width: 100%; float: none; margin-bottom: 10px; } #content p{ font-size: 80%; margin: 20px; font-weight: bold; } #content h1{ font-size: 130%; color: #003366; padding: 0px; margin: 20px; } #content h2{ font-size: 110%; color: #D0EB6A; padding: 0px; margin: 20px; } hr{ visibility: hidden; } .leftimage{ float: left; margin: 0px 10px 20px 0px; border: 1px solid #000000; } .rightimage{ float: right; margin: 0px 0px 20px 15px; border: 1px solid #000000; width: 150px; } .container hr{ clear: both; visibility: hidden; } hr{ visibility: visible; } #footer{ border-top: 1px solid #000000; background-color: #C0DB5A; color: #000000; clear: both; } #footer p{ padding: 3px; font-size: 70%; } #navcontainer{ font-size: 12px; width: 100px; margin-left: 5px; margin-bottom: 5px; } #navcontainer ul{ margin-left: 0px; padding-left: 0px; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a{ display: block; padding: 1px; width: 100px; background-color: #333333; border-bottom: 1px solid #1A1A1A; } #navcontainer a:link, #navlist a:visited{ color: #EEE; text-decoration: none; } #navcontainer a:hover{ background-color: #D0EB5A; color: #000000; } /* clearing ----------------------------------------------- */ .clearfix:after { /*content: "."; */ display: block; height: 0; clear: both; visibility: hidden; } * html>body .clearfix { display: inline; width: 100%; } * html .clearfix { /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }
When viewing the test version of my site apparently it has issues with lower resolutions. I'm using 1280x1024 and I guess some people are having issues with it at 1024x768. Is there a way to fix my code so there are no resolution problems, or minimal ones at that? Thanks. Hi, For some reason my website is not showing in IE8, just a blank white screen?. I've checked the source code, and above the doctype declaration, a comment is appearing Code: <!-- Include the header --> My website It is working fine in other browsers, but not IE8. I cannot see where this comment is comming from though?. the code for my header.php is : here My web site has both a div/ul based drop down menu and expand/collapse menu on the site. I noticed that the drop down horizontal menu goes behind the images and links of the sidebar expand/collapse menu and snaps shut. I had to change the li to another word to get the 2 styles to not confict over the <li> tags and it still works fine, but It seems to have an issue being in the same area as the <ul> (which I cannot remove. To see the problem, visit http://web3.avemarialaw.edu/index.cfm?event=ProspectiveStudent And mouse over the 'Prospective Student' menu in the top hortizonal bar. You'll see it go behind the title images. Also if you mouse down to about the 3rd drop down link, it snaps shut, but only if your mouse is to the left side. The right side of the dropped menus is fine. I would like the drop down menu to go over the side bar and take priority over the side bar. I am including the css and the javascript for both the hortizonal drop down menu and the side bar expand / collapse. Also, both of the styles for the menus are in the same .css file. Not sure if that makes a difference or not. Drop Down: Code: Javascript <script type="text/javascript"> //SuckerTree Horizontal Menu (Sept 14th, 06) //By Dynamic Drive: http://www.dynamicdrive.com/style/ var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas function buildsubmenus_horizontal(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon" } else{ //else if this is a sub level menu (ul) ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon" } ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.visibility="visible" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.visibility="hidden" } } } } if (window.addEventListener) window.addEventListener("load", buildsubmenus_horizontal, false) else if (window.attachEvent) window.attachEvent("onload", buildsubmenus_horizontal) </script> CSS /* 3 Level drop down navigation for main */ .suckertreemenu ul{ margin: 0; padding: 0; list-style-type: none; } /*Top level list items* - Top Level Navigation*/ .suckertreemenu ul li { position: relative; display: inline; float: left; background-color: #FFCC33; /*overall menu background color!*/ } /*1st sub level menu*/ .suckertreemenu ul li ul { left: 0; width: 173px; position: absolute; top: 1em; /*no need to change, as true value set by script */ display: block; visibility: hidden; background-color: #DCD3B9; } /*Sub level menu list items (undo style from Top level List Items)*/ .suckertreemenu ul li ul li { display: list-item; float: none; background-color: #DCD3B9; } /*All subsequent sub menu levels offset after 1st level sub menu */ .suckertreemenu ul li ul li ul{ left: 159px; /* no need to change, as true value set by script */ top: 0; } /* Sub level menu links style */ .suckertreemenu ul li ul li a{ display: block; /*width: 160px; width of sub menu levels*/ color: #660000; font-family: Georgia, "Times New Roman", Times, serif; font-size:11px; font-weight:bolder; text-decoration: none; padding: 4px 1px 4px 7px; border-bottom: 1px solid #FFFFFF; /*Ouline color for drop down menus!*/ background-color: #DCD3B9; } .suckertreemenu ul li a:hover{ /*Changes the color of the menu as the mouse rolls over*/ background-color: #660000; color: #FFFF00; } /*Background image for top level menu list links */ .suckertreemenu .mainfoldericon{ background-color: #DCD3B9; } /*Background image for subsequent level menu list links */ .suckertreemenu .subfoldericon{ background-color: #DCD3B9; } * html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/ padding-top: 1px; } /* Holly Hack for IE \*/ * html .suckertreemenu ul li { float: left; height: 1%;} * html .suckertreemenu ul li a { height: 1%;} * html .suckertreemenu ul li ul li { float: left;} /*End 3 Level Main Navigation*/ Expand / Collapse: Code: Javascript <script language="javascript"> function toggle(id){ ul = "ul_" + id; img = "img_" + id; ulElement = document.getElementById(ul); imgElement = document.getElementById(img); if (ulElement){ if (ulElement.className == 'closed'){ ulElement.className = "open"; imgElement.src = "http://www.avemarialaw.edu/images/opened.gif"; }else{ ulElement.className = "closed"; imgElement.src = "http://www.avemarialaw.edu/images/closed.gif"; } } } </script> CSS /*Side Bar Nav*/ #menus { float: left; margin-left: -30px; padding-top:30px; width: 250px; position: relative; } .open { display: block; } .closed { display: none; } liv { /*Fix for confict between top level nav's <li>'s and sidebars*/ list-style-type: none; padding-top: .2em; padding-bottom: .2em; } liv img { vertical-align: middle; } /*End Side Bar Nav*/ Hey guys, I'm in need of some help here. Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two. If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself. Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template. http://thecheckoutplace.com/compute...eOneNetbook.php If anyone can offer a hand, it means a lot. Cheers guys. I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body { width:800px; font:0.83em/1.4em Tahoma, Geneva, sans-serif; color:#CBD4E3; background:#000 url(images/body_bg.gif) repeat-y top center; letter-spacing:1px; margin:0 auto; } h1,h2,h3,h4,h5,h6 { font-family:"Times New Roman", Times, serif; font-style:italic; font-weight:bold; color:#e9df55; background-color:#000; } h2 { font-size:2em; } h3 { font-size:1.5em; } h4 { font-size:1.25em; } a:link { color:#8090AC; text-decoration:none; } a:visited { color:#B17F6C; text-decoration:none; } a:hover { color:#E9DF55; text-decoration:underline; } a:active { color:#E9DF55; text-decoration:none; } #container { width:760px; margin:0 auto; } #header { height:200px; width:760px; margin:0; padding:0; } #banner { height:100%; width:100%; color:#cbd4e3; background:#000 url(images/header_bg.jpg) no-repeat top left; margin:0 auto; padding:0; } #banner h1 { font-size:400%; color:#CBD4E3; background-color:transparent; float:left; display:inline; margin:0; padding:70px 0 70px 280px; } #banner h2 { font-size: 12pt; color: #e9df55; background-color:transparent; text-indent: 200pt; vertical-align: text-bottom; } navigate{ color : #105BAC; background-color : transparent; height : 20px; font-size: 100%; border-top : 1px solid #999999; } #navigate ul { list-style-type: none; margin-top: 0px; margin-bottom: 0px; margin-left: 150px; margin-right: 0px; padding: 2px 0 0 0; } #navigate ul li { display: inline; } td { font-family: Arial, Helvetica, sans-serif; } th { font-family: Arial, Helvetica, sans-serif; } p { font-size: 14px; color: #FFFFFF; left: 50px; right: 50px; } #main { width: 660px; padding-right: 50px; padding-left: 50px; } #footer { font-family: "Times New Roman", Times, serif; font-size: 9px; color: #666666; height: 100px; width: 760px; vertical-align: text-bottom; text-align: center; } #SplashImage { float: left; } .image-left { clear: none; margin-bottom: 10px; float: left; margin-right: 20px; margin-left: 10px; } .image-right { clear: none; margin-bottom: 10px; margin-left: 10px; float: right; } Hi Any comments, especially CSS wise would be muchly appreciated... URL One thing I did notice was that when you click on a link to go to a page with more content that the one you were on before, that the entire layout shifts...any ideas anyone? thanks! Modo Upon initial load, you see a red block over the images. Why does it do that and how can I fix it? http://www.kubicle.com/beta/ Hey guys. I've been looking for this site that I should have bookmarked when I found but have lost. I can TRY and describe it as best I can. The main background color was white with, depending on the style you've set, a glass of wine or mug of beer fairly large in size and with a low opacity. The styles were simple. Purple or yellow. Wine or beer. Mostly black text. I forget how it was you were able to change them, but he used it in some examples. The menu had list items similar to the naving convention: liquid 2 column nf fixed 3 column nfnh liquid/fixed 3 column etc. The header was the whole wording of whatever the menu items were. Each page he showed examples using css, xhtml and sometimes javascript with the code on the page. At the bottom of each example it had a group for user comments. Some were empty. I don't remember any logos at all on the site other than the wine and beer. I think the url was something like: www.site.com/nameNO~/ I found it the same day I found the "seabold why tables are stupid" site. I remember reading a solution to a problem that I've encountered but I don't remember the code, I was just skimming the site. I tried finding other solutions, or the same solution somewhere else with no luck. Thanks Hi, I am working on moving my tables based site to a tableless css layout. I just wondered if anyone out there could please help, by viewing my site with a Mac, to see if the header image appears. The URL is: http://www.jimpix.co.uk/ecards2/default.asp Another site I made for someone has a header image, defined via the 'background' css property for one of the DIVs, and I have been told it doesn't appear on a Mac. That site is: http://www.somewhereinbetween.biz/ I am concerned my site will suffer from the same problem with a Mac. It looks okay in IE and Firefox. Thanks Jim Hey all. I have not done a great deal of web development, and whatever I have done has been with tables. I have seen a great many debates on the whole table vs div topic, and so this time thought I'd put together a site with divs + css rather than tables + css. so I have a few questions. here is the very simple code I've got so far. Code: <?php include("header.php"); ?> <div id='container'> <div id='header'> Header </div> <div id='rootmenu'> menu </div> <div id='docbody'> <div id='content'> content </div> <div id='sidemenu'> side </div> </div> </div> <div id='footer'> Footer </div> <?php include("footer.php"); ?> and the css file: Code: html, body { height:100%; } #container { width: 100%; height: 100%; margin: 0 auto 0 auto; margin: 0px auto 0px auto; } #header { height: 10%; width: 70%; background: #000; margin: 0px auto 0px auto; } #rootmenu { width: 70%; background: #fff; margin-bottom: 5px; margin: 0px auto 0px auto; } #docbody { width: 70%; height: 85%; padding: 0px; margin: 0px auto 0px auto; } #content { height: 100%; width: 80%; background: #45f; float: left; } #sidemenu { height: 100%; width: 15%; background: #56f; float: right; } #footer { width: 70%; background: #333; margin: 0 auto 0 auto; } most of this is based on code I've been looking at on sites like oswd.org. I would just like to know that I'm on the right track with my divs and css before putting too much work into the site. it always sucks to realise a serious design flaw at a later time. so please, could I get some suggestions on what I need to change and any important things I should know? cheers. OK, I have tested all browsers both Mac and PC, and the only issue I have is with the AOL browser. You can see the site here Can anyone tell me how to trouble shoot CSS for the AOL browser? thanks - I am currently getting back into creating websites and learning new ways to make them. I like using Photoshop to create the graphics, but is there any way that I can use CSS to make it so that on all my pages the main portion on the site remains the same, such as the header, footer and side bars? Appreciate the help. BTW... the site address is Orpheus Designs . I've been trying to work this for 3 hours now, and I need help!! My problem is that I get cursors on 3 of my links but not the other two. Link to the site is http://borgweb.se/beta <- try the menu css is: Code: body { min-width:1024px; background-color: #f5f3ec; margin-right: 0px; margin-left: 0px; padding: 0px; margin-top: 0px; margin-bottom: 0px; } #header { height:240px; width:100%; background-color: #1e1303; background-image: url(images/topback.png); background-repeat: no-repeat; background-position: 50%; margin-right: auto; margin-left: auto; } #header-logo{ max-width:1024px; position:relative; width:1024px; height:240px; background-image: url(images/bw_logo.png); background-repeat: no-repeat; display: block; margin-right: auto; margin-left: auto; } #menu { background-image: url(images/menu.png); height: 76px; width: 75px; float: right; position: relative; top: 80px; right: 20%; } #home { height: 12px; position: relative; display: block; cursor: pointer; } #home a { background-position: 75px; } #aboutme { height: 12px; position: relative; top: -3px; cursor: pointer; } #portfolio { height: 12px; position: relative; top: -5px; cursor: pointer; } #blog { height: 12px; position: relative; top: -8px; cursor: pointer; } #contact { height: 12px; position: relative; top: -10px; cursor: pointer; } #container { width: 1024px; margin-right: auto; margin-left: auto; display: block; float: left; } html is: 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=utf-8" /> <title>Untitled Document</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="header-logo"> <div id="menu"> <div id="home" onclick="location.url('#');"></div> <div id="aboutme"></div> <div id="portfolio"></div> <div id="blog"></div> <div id="contact"></div> </div> </div> </div> </body> </html> Here is a new template I am working on for my site (only "Home", "Events" and "People" work, at the moment). It displays as designed in Firefox but it looks absolutely terrible in IE6. I am aware that there are several ways of hacking IE6 to make it behave differently, however I'm not entirely sure of where in particular I should be applying these. hello, ive made a site for a client but for some reason when they first see it it moves up and then after they go back its fine. they use an old IE so i cant see why it does on my computer and its fine on mozzilla to. www.designerbagsboutique.co.uk is the website, can anyone help? Hey here's the address to my first site using Css layouts. http://funnyguys99.tripod.com/index.htm Please help me fix the logo so it adapts to different resolutions, and I can't figure out how to get that blue bar to the very bottom?!! Please help I'm a big newbie So I am just getting into designing with CSS, and really enjoying it. I put up this site for a friend, its my first coded by hand. I did it all with BBedit on a mac, and it looks fine on Safari and Firefox. However, as you can see, it looks terrible on IE, totally unusable, and I would accept any advice on how to fix it. The menu came from seco consultants and uses whatever:hover to work in IE, though in this case it dont work. The layout is all screwed up too. Anyone want to offer some advice? Here's the site: dobsonfarm.com/connaught Thanks very much, Robin Turner Hi I need css help to make it a 3 column and add google adsense to my site its a music portal my18friends.com |