CSS - Clearance Problems In Firefox
Hi Y'all
I am experiencing some clearance problems in Firefox. The following page: http://temp.awebcompany.net/contact.php The left column ( #left) overlaps the page content (#middle). It all looks nice and clears properly in IE - which I found shocking as I was expecting the problem in IE not FF. Any ideas how to fix this? I have tried the following on #middle and also on #pagecontainer: #middle:after { content: "."; display: block; height: 0; clear: both; visibility:hidden; } Thanks, Vince Similar TutorialsHi, I'm designing the following site: http://www.texasmocktrial.org if you click on the top menu in fire fox, you'll notice that the connector to the menu in the top left hand corner is not aligned properly. in IE, there is no problem. ironically, i originally designed this site for firefox and now i cant figure out what i did to cause this problem. here is the css & javascript file: http://www.texasmocktrial.org/templates/style.css http://www.texasmocktrial.org/templates/menu.js can anyone figure out what seems to be the problem? thanks. I'm trying to do some positioning with CSS laying out borders for my website which are composed of images. ie....border_left.jpg and border_bottom.jpg. My style sheet looks like this. .border_image_left { position: absolute; top: 119px; left: 0px } .border_image_bottom { position: absolute; top: 719px; left: 0px } In my html I have code like this. <p class="border_image_left"><img src="img/left_border.jpg"></p> <p class="border_image_bottom"><img src="img/bottom_border.jpg"></p> however IE and Firefox are rendering it different Firefox shows more space than IE. Anyway to correct this issue. Or any other trick for laying out borders with using a table? Thanks hi, I wonder if anyone can help with my layout problems in Firefox, i have tried to have vertically alignment on the whole page, its looks ok in IE but not FF. Im fairly new to CSS so if anyone can spot what i have done wrong that would be great link to layout here thanks on this page the image on the left that reads "Grade" is 10px from the side (where it should be) in IE... but in firefox, it isnt 10px from the side... but rather 0px... when i change the margin-right to 20px instead of 10px, it looks fine in Firefox, but 10px too far over in IE. any help would be GREAT thanks I've been pulling out my hair trying to figure out what it is i'm doing wrong here. I've been messing with this code and trying different things, but can't seem to figure out what the problem is. One of my divs is not sized properly. Can someone take a quick look and see what it could be? I'd realyl appreciate it. Thanks! http://ritchie.acomp.usf.edu/~lamba/my2.html http://925-sterling-silver-jewelry....udes/header.php well this is my first proper CSS based site but i am having troubles with it. the problem is that in IE the div (main) starts near to the sidebar div, wheras in firefox it starts a bit further away! also at the moment the links at the bottom dont appear in IE but do in FF albeit little messed up. help please? look at URL in both IE and Firefox, and see the difference. It's really butchered in Firefox, and I REALLY don't see why. My code seems okay. source: PHP 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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>my index...</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body class="body"> {start loop} <div class="content2"> <div class="newsheader"><p class="leftalign"><b>{title}</b></p><p class="rightalign">{author} - {day} / {month} / {year}</p></div> <div class="newscontent">{content}</div> <div class="newsfooter"><p class="rightalign"><a href="{commentsurl}">see comments</a></p></div> </div> {end loop} {next page} </body> </html> CSS: PHP Code: a { color: #000000; text-decoration: underline; } a:hover {color: #808688;} body { background: #F2F0F0; color: #880000; text-align: center; } div.content { border: 1px solid; margin-top: 1px; margin-left: 0px; margin-right: 5px; padding-left: 0px; padding-top: 2px; padding-bottom: 2px; padding-right: 2px; text-align: center; width: 97%; border-color: #880000; float: inherit; } div.content2 { border: 1px solid; margin-top: 0px; margin-left: 0px; margin-right: 0px; padding-left: 4px; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; text-align: center; width: 90%; background-color: #C9C9C9; float: inherit; } div.newsheader { margin-left: 0px; margin-right: 0px; width: 100%; background-color: Maroon; border-bottom: 1px solid; padding-bottom: 3px; color: white; float: inherit; } div.newscontent { text-align: justify; padding: 2px; color: black; } div.newsfooter { margin-left: 0px; margin-right: 0px; width: 100%; border-color: Maroon; border-top: 1px solid; padding-bottom: 3px; color: black; float: inherit; } div.container { margin-left: auto; margin-right: auto; text-align: center; width: 100%; } p.rightalign { float:right; } p.leftalign { float:left; } if anyone could help.. im losing my calm :P Hello, I'm having a slight issue with what I belive to be margins. In IE half the logo is being cut off and in firefox I have a grey area above the menu bar that shouldn't be there. I have checked both my css and xhtml both validated fine with out any warnings. I'm pretty new to CSS and this is starting to annoy me =\. **WARNING** The site is political in nature. Links to the code: h**p://www [.] dncreform [.] com / t / css / main.css h**p://www [.] dncreform [.] com / t / Thank You, William If you view my website http://jordanmeeter.com/index you'll see how the menu displays, and how it is supposed to appear. And then if you view the website in IE, you'll notice that there are grey boxes inbetween each menu item. What is causing this? Here is the HTML: Code: <div id="navcontainer"> <ul id="navlist"> <li><a href="#" title="One">One</a></li> <li><a href="#" title="Two">Two</a></li> <li><a href="#" title="Three">Three</a></li> <li><a href="#" title="Four">Four</a></li> <li><a href="#" title="Five">Five</a></li> </ul> </div> And the CSS: Code: #navlist { padding: 0 1px 1px; margin-left: 0; font: bold 12px Verdana, sans-serif; background: gray; width: 13em; } #navlist li { list-style: none; margin: 0; border-top: 1px solid gray; text-align: left; } #navlist li a { display: block; padding: 0.25em 0.5em 0.25em 0.75em; border-left: 1em solid #38739D; background: #616161; text-decoration: none; color: #A5D3EF; } #navlist li a:link { color: #A5D3EF; } #navlist li a:visited { color: #A5D3EF; } #navlist li a:hover { border-color: #54ACEB; color: #FFF; background: #616161; } Hi, I have managed to rewrite my three column navigation page using floated divs instead of its original table (the page was written years ago and I am updating to get away from tables). This was hard for me because I am very new to CSS. My code validated and the page looks fine in IE but in Firefox the third or right column does not clear the middle column. I tried to google the problem but the explanations are way over my head. Also the only way I could get the blue border to not show up in firefox was to add the style directly to the image code. Can someone please help me. The link is www.medeaslair.net/myths.html. Here is the CSS Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Greek Myths</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Rose A. Rosencrans" /> <style type="text/css"> body { text-align: center; padding-top: 45px; background-image: url("images/tan_marble3.jpg"); color: black; font-family: papyrus; font-weight: bold; font-size: 15px; } a:link { color: blue; } a:visited { color: green; } a image { border-style: none; } #container { margin: 0 auto; width: 750px; text-align: left; } #columnone { float: left; margin: 0; width: 250px; padding-top: 45px; } #columntwo { float: left; width: 250px; padding-top: 45px; } #columnthree { float: right; clear: both; padding-top: 25px; } h1 { text-align: center; } h3 { text-align: center; } #email { text-align: center; text-decoration: none; padding-top: 150px; border: 0; } ul { margin: 0 auto width: 750px; } li { text-size: 12px; text-decoration: none; padding-right: 4px; margin: 0 auto; margin-bottom: 2px; border-style: none; list-style-type: none; } </style> </head> Here is the HTML Code: <body> <div id="container"> <img src="images/grapes-l.gif" style="float: left; width: 70px; height: 85px;" alt="Grapes" title="Grapes" /> <img src="images/grapestran.gif" style="float: right; width: 70px; height: 85px;" alt="Greek Man" title="Greek Man" /> <h1>Tales of Greek Mythology</h1> <img src="images/bar66.gif" style="float: left; padding-left: 100px; width: 420px;" alt="Vine" title="Vine" /> <br /> <div id="columnone"> <ul> <li style="font-size: 15px; text-decoration: underline; padding-bottom: 4px;">Gods and Goddesses</li> <li><a href="aphrodite.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Aphrodite</li> <li><a href="apollo.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Apollo</li> <li><a href="artemis.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Artemis</li> <li><a href="athena.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Athena</li> <li><a href="dionysus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Dionysus</li> <li><a href="hades.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hades</li> <li><a href="hera.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hera</li> <li><a href="hermes.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Hermes</li> <li><a href="poseidon.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Poseidon</li> <li><a href="zeus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Zeus</li> <li style="font-size: 15px; text-decoration: underline; padding-top: 210px; padding-bottom: 4px;">Tales of Love and Woe</li> <li><a href="hermes.html#baucis"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Baucis and Philemon</li> <li><a href="cupid.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Cupid and Psyche</li> <li><a href="pan.html#echo"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Echo and Narcissus</li> <li><a href="pan.html#endymion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Endymion</li> <li><a href="artemis.html#orion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Orion</li> <li><a href="orpheus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Orpheus and Eurydice</li> <li style="font-size: 15px; text-decoration: underline; padding-top: 60px; padding-bottom: 4px;">Giants and Beasts</li> <li><a href="artemis.html#otus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Otus and Ephialtes</li> <li><a href="minotaur.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Minotaur</li> <li><a href="cyclopes.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Cyclopes</li> </ul> </div> <!-- end of columnone div --> <div id="columntwo"> <ul> <li style="text-size: 15px; text-decoration: underline;">Men and Heroes</li> <li style="padding-top: 4px;"><a href="atreus.html#agamemnon"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Agamemnon</li> <li><a href="atreus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Atreus</li> <li><a href="daedalus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Daedalus and Icarus</li> <li><a href="athena.html#erichthonius"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Erichthonius</li> <li><a href="heracles.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Heracles</li> <li><a href="apollo.html#hyacinthus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Hyacinthus</li> <li><a href="hera.html#ixion"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Ixion</li> <li><a href="atreus.html#orestes"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Orestes</li> <li><a href="dionysus.html#pentheus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Pentheus</li> <li><a href="perseus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Perseus</li> <li><a href="phrixus.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Phrixus</li> <li><a href="pandora.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Prometheus</li> <li><a href="hades.html#sisyphus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Sisyphus</li> <li><a href="atreus.html#tantalus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Tantalus</li> <li style="text-size: 15px; text-decoration: underline; padding-top: 42px;">Tales of The Sea</li> <li style="padding-top: 4px;"><a href="sea.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /> </a>Sea Myths</li> <li><a href="circe.html#glaucus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Glaucus and Scylla</li> <li><a href="sea.html#nereus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Nereus</li> <li><a href="sea.html#sirens"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>The Sirens</li> <li><a href="sea.html#triton"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Triton</li> <li style="text-size: 15px; text-decoration: underline; padding-top: 100px;">Tales of Interest</li> <li style="padding-top: 4px;"><a href="garden.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Mythic Garden</li> <li><a href="samhain.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Blessed Samhain </li> <li><a href="thor.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Thor</li> <li><a href="links.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Links and Credits </li> </ul> </div> <!-- end of columntwo div --> <div id="columnthree"> <ul> <li style="text-size: 15px; text-decoration: underline; padding-top: 20px;">Women and Witches</li> <li style="padding-top: 2px;"><a href="heracles.html#alcmene"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Alcmene</li> <li><a href="athena.html#arachne"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Arachne</li> <li><a href="circe.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Circe</li> <li><a href="dionysus.html#erigone"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Erigone and Icarius</li> <li><a href="zeus.html#europa"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Europa</li> <li><a href="zeus.html#io"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Io</li> <li><a href="zeus.html#leda"><img src="images/grape.gif" style="border-style: none;" style="border-style: none;" alt="grapes" /></a>Leda</li> <li><a href="leto.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Leto</li> <li><a href="medea.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Medea</li> <li><a href="leto.html#niobe"><img src="images/grape.gif" style="border-style: none;" style="border-style: none;" alt="grapes" /></a>Niobe</li> <li><a href="pandora.html#pandora"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Pandora</li> <li><a href="persephone.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Persephone</li> <li><a href="dionysus.html#semele"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Semele </li> <li><a href="pan.html#syrinx"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Syrinx</li> <li style="text-size: 15px; text-decoration: underline; padding-top: 42px;">Satyrs and Centaurs</li> <li style="padding-top: 4px;"><a href="chiron.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Chiron</li> <li><a href="dionysus.html#midas"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>King Midas </li> <li><a href="apollo.html#marsyas"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Apollo and Marsyas</li> <li><a href="chiron.html#nessus"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Nessus</li> <li><a href="pan.html"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a>Pan</li> <li><a href="chiron.html#peirithous"><img src="images/grape.gif" style="border-style: none;" alt="grapes" /></a> Peirithous</li> </ul> </div> <!-- end of columnthree div --> </div> <!-- end of container div --> </body> </html> the url is: http:// jhlmc.com/JHLMC/FreshDemoFiles/CoverTToLayers_JHLMCArt.html In IE8 beta it works perfectly. In firefox the entire bottom section (the part under the slide show) is messed up. In Opera there's a gap under the play controls. If I close the gap, it messes up IE. Getting this slide show to work was quite the task, but I'm close to having it work on the big three! Should I just un-nest everything? I have just put my website live and it is running perfect in MS Explorer but in firefox and netscape the links at the bottom of the page are not working properly. Site URL is http://www.updatetechnology.ie here is the code i have for these links: <TD><span class="grey"><a href="copyright.htm">Copyright</a> | <a href="sitemap.htm">Sitemap</a> | <a href="links.htm">Links</a> </span></TD> and the corrseponding css class: .grey {font-family: Arial, Helvetica, san serif; font-size: 9pt; TEXT-DECORATION:NONE; COLOR:#ffffff; } .grey A{ COLOR:#ffffff; font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; font-style: normal; text-decoration: none; font-variant: normal; text-transform: none; } .grey A:HOVER{ COLOR:#000000; font-family: Arial, Helvetica, san serif; font-size: 9pt ;font-weight: bold; TEXT-DECORATION:none } .grey A:MOUSEOVER{ COLOR:#000000; font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; TEXT-DECORATION:NONE } In netscape when you roll over these links it is just keeping to the default site roll over colours whereas it should be set to the .grey class i defined.......... has anyone come across this before?? and if so is there a solution out there. Thanks hello. i'm using a CSS tutorial and DREAMWEAVER to build a website. i find that the site is interpreted the way i would like it in either Firefox or Safari...but not in IE. When links are hovered over while using IE, the page distorts. has anyone experienced this type of problem before? thank you in advance for your time and assistance! i did post several explanatory screenshots to illustrate the problem. replace each "@" with a period. mea culpa. www@wwpea@net/screenshots@htm Please delete... I'm hoping I can get some guidance on why I can't get this popout menu to work! I used the code from this article to build a popout menu, but for some reason I can't get it to work in firefox. If you test their demo in Firefox but if you test mine, it looks great in Internet Explorer, but gets all messed up Firefox & Opera. If you save the page you will see there is a style sheet as well as a small Javascript file too. If someone could check over my code for me that would be great! I have been staring at it for hours and can't seem to find the problem! This is my first project using CSS styles to control something besides the usual things like fonts, etc. so go easy on me! Thanks in advance! Chelsea im having trouble getting some elements to move off to the right side of my layout. it appears how i want in firefox but completly wrong in IE. id like the "new release" section to be on the upper right hand of the page right next to the news content. IE forces it down to the lower right for some reason. and also causes some other weird looking artifacts or something. i know you can see my style sheet from that site so ill post a portion of it here. im still pretty new to a lot of this soplease try to make any help relatively simple if possible here is the link to the page: http://spore.50megs.com/index.html Code: release-art { border: 0; margin: 0; padding: 0; width: 93px; } .release-info { float: right; margin: -70px 0 0 0; padding: 0; width: 145px; } #releases { background: #bbbbb8 url('bg-pattern-content.gif') repeat; margin: 0 0 0 auto; padding: 0; text-align: justify; width: 245px; } #releases .release-category { font-weight: bold; } #release-details { list-style: none; margin: 0; padding: 0; } #releases li { margin: 0; padding: 0; } Hi guys, Please help. Im very confused as to why setting display:inline in my CSS is giving me grief with text "breaking out" of the list element in FireFox???. If I give the li element a background colour clearly I can see that the text is outside the boundaries of the li element. However, if I used display:block and float:left the li item ecompasses the text just fine. My CSS is below. Thankyou in advance Code: #navcontainer { margin-left: 30px; } #navlist{ list-style: none; padding: 0; margin: 0; } #navlist li { display: inline; border-right: 1px solid #000; padding: 0 0.4em 0 0.4em; margin: 0 0.4em 0 -0.4em; } /*Win IE browsers - hide from Mac IE\*/ * html #navlist li { display: block; float: left; } #navlist li a{ font-family: Garamond, "Garamond-Normal", Georgia, "Times New Roman", Times, serif; font-size: 200%; /* set the font size for p, scaled from the body declaration */ text-decoration:none; } #navlist a:link, #navlist a:visited{ color: #666; } /* unvisited link */ #navlist a:link#current, #navlist a:visited#current, #navlist a:hover { color: #000; } Hi, I'm studyng php for content management system. The php is ok. I used an external stylesheet, when i see it in Firefox is ok. But when i see it in Explorer it's not ok. The problem is on the left colum, the lists don't work well in Explorer. It seems to be difference between how Explorer and Firefox works with Stylesheets. If can anyone help to make this css code compatible for the two browsers. Here's the code of my css : /* Site Colors: #1A446C - blue grey #689DC1 - light blue #D4E6F4 - very light blue #EEE4B9 - light tan #8D0D19 - burgundy */ html { height: 100%; width: 100%; } body { width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; background: #D4E6F4; font-size: 13px; line-height: 15px; } img { border: none; } table, tr, td { border-collapse: collapse; vertical-align: top; font-size: 13px; line-height: 15px;} a { color: #8D0D19;} #header { height: 70px; margin: 0px; padding: 0px; text-align: left; background: #1A446C; color: #D4E6F4; } #header h1 { padding: 1em; margin: 0px;} #main { margin: 0px; padding: 0px; height: 600px; width: 100%; background: #EEE4B9; } #structure { height: 600px; width: 100%; } #footer { height: 2em; margin: 0px; padding: 1em; text-align: center; background: #1A446C; color: #D4E6F4; } /* Navigation */ #navigation { width: 150px; padding: 1em 2em; color: #D4E6F4; background: #8D0D19; } #navigation a { color: #D4E6F4; text-decoration: none; } ul.subjects { padding-left: 0; list-style: none; } ul.pages { padding-left: 2em; list-style: square; } .selected { font-weight: bold; } /* Page Content */ #page { padding-left: 2em; vertical-align: top; background: #EEE4B9; } #page h2 { color: #8D0D19; margin-top: 1em;} #page h3 { color: #8D0D19; } Thanks for yout time. Hello ppl, I made a website using some mouseover menus, this is the simpliest way I found to create some menues using divs and css but I have a problems in firefox and netscape, the menu it's not apearing at all when i go over a TD which has the onmouseover property. I tried to add the mouseover property to the image from that TD but I had no succes and to a link which I made for test , nothing happent . In opera and IE everything is working fine. the link is here www.medimpact.ro 10x in advance see ya all |