CSS - Site Works In Ie But Broken In Ff, Chrome Etc
Hi
I am not new to web development but fairly new to css and learning css-xhtml for web 2.0. I am making a design at http://www.superstaruk.com/v/ it shows fine in IE but in FF, Chrome and Opera etc it shows broken. Main problem is with pistioning the divs and also the background of free delivery does not appear. Can anybody help me please by pointing out the problem? I read the box-model but even according to that i am unable to solve this. thank you Similar Tutorialsthe menu at the site I am building myself at: http://sphinxgaming.ath.cx/ Works perfectly in firefox, all links are missing on the menu in IE And the validator gives me some very strange errors (document type does not allow element "BODY", for example) http://validator.w3.org/check?uri=h...lidator%2F1.654 Any ideas? By the way, I have tried 3 different DOCTYPES, with no better results I am having a problem displaying text under images in IE, it looks fine on FF though. In IE the text runs down the side of the images and looks really bad. Can someone tell me why it does not display properly in IE? Here is an example page product_info.php?products_id=209 And this is the stylesheet stylesheet.css Any help would be much appreciated. Thanks Peter PS. Looks like I am not allowed to post links yet, I can send them to you if you like? Hi I have done two pages and they seem to work fine in IE8 but when I view it in firefox there are a couple of issues: link On the home page i have a lightbox set up for the polaroids with specific width and height. In IE the div is exact in size but in firefox the div seems to expand beyond the dimensions of the div (a red dotted border is displayed on click) On the Products page, the right hand side of the book has products listed in which you hover over and the polaroids will reflect different angled shots of the product that the cursor is over. Each product line is a hyperlink but in Firefox some of these lines are unlinkable whereas in IE there is no problem here! It is the same instance with the sub menu on the left hand page too Can anyone point me in the right direction of solving these issues please? I want this menu bar to be at the very top of the page, in IE it looks fine but in Chrome the text is below the box, any ideas would be appreciated? Code: <html> <head> <style type="text/css"> .people { position:absolute; right:0px; top:0px; width:300px; height:25px; background-color:#E4E4E4; vertical-align:super; } </style> <title>home | account | about | help</title> </head> <body> <div class="people"> <p><b><font color="#0077CC" face="Arial" size="2">home</font></b><font face="Arial"> <font color="#CCCCCC">|</font> </font><b> <font color="#0077CC" face="Arial" size="2">account</font></b><font face="Arial"> <font color="#CCCCCC">|</font> </font><b> <font color="#0077CC" size="2" face="Arial">about</font></b><font face="Arial"> <font color="#CCCCCC">|</font> </font><b> <font color="#0077CC" face="Arial" size="2">help</font></b></p> </div> </body> </html> Hi all, I have a problem in scaling images, I re-size all images by -50% to make them act as thumbnails at the following address: http://www.magic-photography.co.uk/photoselector.html It works fine in Chrome using the following simple CSS: Code: a img { border: none; height: 50%; width:auto; text-align: left; } however in IE/Firefox the images do not re-scale at all. Very very grateful for any help offered. Thanks My web page looks fine on FF and Chrome, but doesn't on IE. Everything is pushed up. Anyone have any suggestions? I have searched the net and can't find a solution. egoboosters . org / newindex1 . htm Can anyone help me get this to work in IE? Here's the link to the page I'm working on, which I'll be moving from my site to the proper domain soon. ... (annoyed - can't post urls as a new user, which makes this forum limiting - is there a way around this? How about if I try "#" = "." and "|" = "/" http:||krisbunda#com|bb|db-series-planters#html ) ... Here's the "thumbnails" CSS I'm using: CSS Code: Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: .25em solid #FFF; margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; } .thumbnail:active{ background-color: transparent; } .thumbnail:active img{ border: 0em solid #3F0; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: #999; padding: 0em; left: -250em; border: .25em dashed gray; visibility: hidden; color: #FFF; text-decoration: none; text-align:center; height:auto; width:auto; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: .25em; padding: 0em; height:auto; width:auto; } .thumbnail:active span{ /*CSS for enlarged image*/ visibility: visible; top: 0em; left: 1.5em; /*position where enlarged image should offset horizontally */ z-index: 5; height:auto; width:auto; }
And here's the HTML: (well, the html will have to be viewed in the browser because of the "No URLs" rule) Thanks in advance for any help. heres my currently working on site it look great on IE, Firefox and opera but i just see a blank page in Chrome and Safari!! web site: macmillanpc.host56.com/Dreamy_Elegance_template/ please help me! :/ check source, the css is in there (not linked) these is really f... me off. Sorry if its too vague, let me know if you need more details. Hi, my site looks good in all browsers, PC and Mac, except Google Chrome. Here's the site:site Do I need to write a CSS exception for Google Chrome? thanks Hey, for a while I've been developing a site, just to improve my skills in php etc. I always tested it in IE7/IE8 and Mozilla 3, I knew other browsers wouldn't render it great, but I also need things to look okay with Chrome. This is how my site SHOULD look: This is how it looks in chrome: My site URL is http://www.pokerbrothers.net The HTML for the entire page: The parts that effect the 2 bars that are broken in chrome are highlighted 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" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta name="keywords" content="poker,brothers,free,fast,simple,texas,holdem,guest" /> <meta name="robots" content="follow,index" /> <title>Home :: PokerBrothers.net</title> <link href="http://www.static.pokerbrothers.net/css/include?load=15&x=182&y=631" rel="stylesheet" type="text/css" /> <script type="text/javascript"> // Globs var session_id = "pjpennan89o2m1dn6kjh4n48d7"; var session_userid = 0; var session_username = "Guest_"; var session_location = "http://www.pokerbrothers.net/"; var session_location_encoded = "http%3A%2F%2Fwww.pokerbrothers.net%2F"; var session_location_last = ""; function pageOnLoad () { setTimeout("pbhttp_Session_Exit(true, '15')", 900000); } </script> <script type="text/javascript" src="http://www.static.pokerbrothers.net/js/class.js" defer="defer"></script> <script type="text/javascript" src="http://www.static.pokerbrothers.net/js/global.js" defer="defer"></script> </head> <body onload="pageOnLoad();"> <div id="container" align="center"> <div class="bar_container"> <ul id="bar_header"> <li id="bar_header_left"></li> <li id="bar_header_title"><a href="http://www.pokerbrothers.net/"></a></li> <li id="bar_header_fill"></li> <li id="bar_header_howtoplay"><div/><a href="http://www.faq.pokerbrothers.net/play/how"></a></li> <li id="bar_header_signup"><div/><a href="http://www.signup.pokerbrothers.net/"></a></li> <li id="bar_header_play"><div/><a href="http://www.play.pokerbrothers.net/"></a></li> </ul> </div> <div class="bar_container"> <div id="bar_navigation"> <div id="bav_navigation_top"> <div id="bar_navigation_top_left"></div> <div id="bar_navigation_top_fill"> <div id="bar_navigation_top_fill_loginarea"> <form id="navlogin" name="navlogin" action="http://www.login.pokerbrothers.net/login" method="post" onsubmit="return pbhttp_nav_login_check()"> <div id="bar_navigation_top_fill_loginarea_usernamearea"> <input type="text" id="navlogin_username" name="navlogin_username" maxlength="30" value="Username" onfocus="nav_login_form_onclick('user');" onblur="nav_login_form_exit('user')" /> </div> <div id="bar_navigation_top_fill_loginarea_passwordarea"> <input type="text" id="navlogin_password" name="navlogin_password" maxlength="30" value="Password" onfocus="nav_login_form_onclick('pass');" /> </div> <div id="bar_navigation_top_fill_loginarea_submitarea"> <input type="submit" id="navlogin_submit" name="navlogin_submit" value="" /> </div> </form> </div> <div id="bar_navigation_top_left_text"> Welcome to PokerBrothers. Please login or <a href="http://www.signup.pokerbrothers.net/">Sign up</a> </div> </div> <div id="bar_navigation_top_right"></div> </div> <div id="bar_navigation_bottom"> <div id="bar_navigation_bottom_left"></div> <div id="bar_navigation_bottom_fill"> </div> <div id="bar_navigation_bottom_right"></div> </div> </div> </div> <div class="bar_container"> <table id="bar_body" cellpadding="0" cellspacing="0" border="0"> <tr id="bar_body_top"> <td id="bar_body_box1_top_left"></td> <td id="bar_body_box1_top_fill" align="center"><div id="bar_body_box1_top_text"></div></td> <td id="bar_body_merge_top"></td> <td id="bar_body_box2_top_fill" align="center"><div id="bar_body_box2_top_text"></div></td> <td id="bar_body_box2_top_right"></td> </tr> <tr id="bar_body_middle"> <td id="bar_body_box1_middle_left"></td> <td id="bar_body_box1_body"> Welcome to PokerBrothers.net, bleh. </td> <td id="bar_body_merge_middle"></td> <td id="bar_body_box2_body"> Load ad here </td> <td id="bar_body_box2_middle_right"></td> </tr> <tr id="bar_body_bottom"> <td id="bar_body_box1_bottom_left"></td> <td id="bar_body_box1_bottom_fill"></td> <td id="bar_body_merge_bottom"></td> <td id="bar_body_box2_bottom_fill"></td> <td id="bar_body_box2_bottom_right"></td> </tr> </table> </div> </div> </body> </html> And the CSS... Direct links: Some CSS that effects both bars: http://www.static.pokerbrothers.net...de?load=6&x=571 The top bar's css: http://www.static.pokerbrothers.net/css/headerbar.css the other bar's css: http://www.static.pokerbrothers.net/css/navbar.css I'm wondering if anybody has any clues as to why my site appears like this, i've spent hours and hours trying countless things but to no avail. Any help on anything related to this will be appreicated, thanks . Oh, and sorry for the lack of commenting in the CSS, it wasnt planned... It is quite messy I have a website (www.fullforcecreative.com) that displays properly on I.E. and Firefox. I just recently pulled it up in Google Chrome, and it appears no style sheets are being imported. I then thought "that is strange, but Safari is based on the same thing (kinda), so I'll load it in Safari." Same issue. No style sheets. Has anyone seen anything like this before? I link to one style sheet in the header. Code: <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css; charset=utf-8" media="screen" /> This style sheet linked to from that line: Code: @charset "UTF-8"; @import url(yaml/core/base.css); @import url(css/navigation/nav_shinybuttons.css); @import url(css/screen/basemod.css); @import url(css/screen/content.css); @import url(yaml/print/print_003.css); All the other stylesheets open with the Code: @charset "UTF-8"; @media all { insert css here } The site is using YAML (http://www.yaml.de/en/) as a framework for the CSS. The only issue I could find relativly close to it was this: http://www.davidroessli.com/logs/2007/03/safari_utf8_rendering_glitch_f/ I made the change listed there (because the CSS stylesheets are in UTF-8), but it made no difference. Does anyone have any ideas? This is driving me up the wall. It does display properly in I.E. and firefox. Thanks, seth 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. Hi I have a website which works fine in Firefox, but has problems in Internet Explorer. can someone please have a look and see what is wrong? the positioning of the Div boxes go wrong in IE, and also it seems like the site is scretched vertically. many thanks The problem is fixed now Hello, In the last few days I made this website: http://www.gambiaguesthouse.nl/index.php?site=home I tested it with firefox and once a day i tested it with IE. Now the site works like a charm in Firefox but after the changes I made today It doesn't work under IE. The width of the site is not correct in IE. This is the CSS code of the website, if I remove the "#all..." part that I made bold the width is correct, but then the site gets very ugly. When I put the "#all..." part back the width of the site isn't correct in IE. De W3C CSS checker gives no errors I hope somebody can see what I do wrong, I am working to figure this out for 2 hours now and I can't find out what the problem is Hope you guys can tell me what I did wrong with my CSS code. Code: body { font-family: verdana; background-color: #bbdaf9; margin: 0; padding: 0; } #all { color: #062A4E; font-size: 14px; background-color: #e9f3fe; position: relative; width: 632px; min-height: 609px; margin: 7px auto 30px; padding: 202px 167px 10px 204px; } #head { position: absolute; top: 0; right: 0; width: 1003px; height: 187px; padding-top: 5px; background-image:url(img/titel.jpg); } #footer { position: absolute; top: -500px; } #con { background-color: #f3f7fb; width: 100%; min-height: 620px; } #add { position: absolute; top: 198px; padding-top: 4px; right: 0; width: 165px; height: 605px; } #menu { position: absolute; top: 198px; left: 0; padding-top: 4px; right: 0; width: 200px; height: 150px; } #login { position: absolute; font-size: 14px; top: 348px; left: 0; width: 190px; background-color: #e0eefc; border-style:solid; border-color:#f3f8fe;} #rotating { position: absolute; top: 470px; left: 0; padding-left: 5px; padding-top: 4px; right: 0; width: 200px; height: 350px; } a { color: #c40000; font-size: 10px; text-decoration: none; margin: 0; padding: 0; border-width: 0; cursor: pointer; } a:hover { color: #c40000; } .whitetb { color: white; } img { margin: 0; padding: 0; border-width: 0; } li { list-style:none; float: left; text-align: center; border-style:solid; border-color:#f3f8fe; } ul { border-top: 0px solid #FFF; width: 195px; height: 145px; background: #e0eefc; margin: 0; padding: 0; } a.menuitem { padding-top: 3px; font-size: 16px; color: #062A4E; text-decoration: none; font-weight: bold; display: block; width: 190px; height: 27px; } a.menuitem:hover { background: #DCEFF8; color: #116086; } And this is the HTML source code of my website: PHP Code: <html> <title>GambiaGuesthouse.nl</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <div id="all"> <div id="head"></div> <div id="menu"> <ul> <li> <a class="menuitem" href="index.php?site=home" title="Home">Home</a> </li> <li> <a class="menuitem" href="index.php?site=links" title="Links">Links</a> </li> <li> <a class="menuitem" href="index.php?site=toevoegen" title="Guesthouses">Guesthouses</a> </li> <li> <a class="menuitem" href="index.php?site=contact" title="Contact">Contact</a> </li> </ul> </div> <div id="rotating"> <img src="img/rotate1.jpg" id="rotate"></div> <div id="login"> <form target="index.php?site=login" method="POST"> Gebruiker:<br> <input type="text" name="gebruiker" size="27" /><br> Wachtwoord:<br> <input type="password" name="wachtwoord" size="27" /><br /> <input type="submit" value="Log In" /> </div> <div id="add"> add comes here </div> <div id="con"> <b>Gambia</b><br /><br /> Het is een prachtig land, waar je avontuurlijke dingen kan doen. Maar vooral lekker uitrusten op de prachtige stranden. <br>Het is een geweldig gastvrij land.De plaatselijke bevolking bezit een unieke gave.ze kunnen in het nu leven,en genieten van het moment.</p> <p>Dan is er voor je gevoel even geen verleden en ook geen toekomst,alleen het NU en dan kan je echt leven in zijn puurste vorm,je openen en gelukkig zijn,en dit kunnen de mensen in Gambia. <br>Daarom vind ik dit zo een mooi land,het is prachtig om te zien hoe deze mensen kunnen genieten. dankbaar zijn een groot goed is.</p> <p> Op deze website vindt u een zo groot mogelijk overzicht van Guesthouses in the Gambia.</p> <p>Guesthouses zijn huisjes die verhuurd worden meestal door de lokale bevolking en zijn meestal een stuk lager geprijsd van de hotels in Gambia <br>Ook als u met een groot gezelschap van plan bent om naar Gambia te gaan is een Guesthouse de perfecte manier om te verblijven in Gambia.</p></div> </body> </html> The top navigation displays fine on the two browsers, but on IE 6 it turns in to a vertical list: http://amarshah.org/bruce/ This is a joomla site and uses the magic menu mod to create the custom font menu. Page Code: Code: <table class="pill"> <tr > <td class="pill_m"> <div id="menuspace" style="float: left;"> </div> <div id="pillmenu" style=" width: 810px; margin-left: auto; margin-right: auto;"> <jdoc:include type="modules" name="user3" /> </div> <div id="menuspace2" style="float: left;"></div> <div id="pillmenu" style="width: 470px; margin-left: auto; margin-right: auto;"> <jdoc:include type="modules" name="user4" /> </div> </td> </tr> </table> CSS Code: Code: /* horizontal menu */ table.pill { width:900px; padding: 0; margin: 0; height:87px; border: none; text-align:center; } td.pill_m { padding: 0; margin: 0; text-align:center; } #menuspace { width: 900px; height: 15px; background-color: #d2cdb7; } #menuspace2 { width: 900px; height: 13px; background-color: #d2cdb7; } #pillmenu { width: 900px; height: 22px; background-color: #d2cdb7; text-align:center; } #pillmenu ul { margin: 0; padding: 0; list-style:none; } #pillmenu li { float: left; margin: 0; padding: 0; display: inline; list-style-type: none; } #pillmenu a { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; display:block; height: 22px; padding: 0px 4px; color: #000000; text-decoration: none; } #pillmenu a:hover { color: #96abbe; } #pillmenu a#active_menu-nav { height: 22px; } For some reason my sidebar keeps breaking the wrapper and floating under my content on my blog page. universitysquarecondos. com / owners-2 / updates/ Sorry about wack url but it wont let me post urls since it thinks I may be spamming or something... Note that this only happens in IE, not in Mozilla (of course... ) Any ideas? Thanks for helping a noob get his sealegs, Reid Hey, I had a website which ran for about an year on most browsers with no probs. Now when Firefox v4 struck my site css is broken and im struggling to make it work on all sites properly. I know its shameless of me to ask to look trough the whole site but i just cant pick out where the problem exactly lies. the site is www . alterum . ee in firefox v4 main menu just breaks and seems like drags the content-wrapper with it. other browsers work fine atm. i would really appriciate if someone heped me with that problem. Or ill have to redo whole css from scratch which would be a bummer. Hi everyone, Help please. I'm relatively new to CSS. I've coded the following application form and when opened in Chrome and IE9 the formatting and layout is shown as expected. IE8 doesnt seem as friendly and the 2nd page 'Questionnaire' has broken borders. Can anyone help? Here is the CSS behind the 'Job Application Form' @charset "UTF-8"; /* CSS Document */ body{ background-image: url(xxxxxx); background-repeat: no-repeat; background-position: top left; background-color: #CBCBCB} form{ background-color:#FFFFFF; width:800px; margin:90px auto; border:2px solid #A9A9A9; padding: 20px; } #header_content * {font-family:Arial,Helvetica,sans-serif!important} #content {margin-bottom:20px;} #sectionCandInf, .sectionContent, #content div *{background-color:#FFF} #aq523 {width:650px;} #aq515 {width:650px;} #aq516 {width:650px;} #aq517 {width:650px;} #aq519 {width:650px;} #aq522 {width:650px;} #aq524 {width:650px;} #aq521 {width:650px;} #aq525 {width:650px;} #aq518 {width:650px;} #aq520 {width:650px;} #aq2922 {width:650px;margin-bottom:10px;} #aq2924 {width:650px;margin-bottom:10px;} #aq2916 {width:650px;margin-bottom:10px;} #aq2917 {width:650px;margin-bottom:10px;} #aq2918 {width:650px;margin-bottom:10px;} #aq2919 {width:650px;margin-bottom:10px;} #aq2920 {width:650px;margin-bottom:10px;} #aq2923 {width:650px;margin-bottom:10px;} #aq2926 {width:650px;margin-bottom:10px;} #aq2925 {width:650px;margin-bottom:10px;} #chpLoginSection{margin-top:20px; border:2px dotted #0092B5} #chpCreateSection {margin-top:20px;border:2px dotted #0092B5} h5 { font-size: 110%; font-weight: bold; margin: 0; padding: 20 20px; background-color: #fff!important; color: #FFFFFF; width: 25em; float: left; color: #000; } #reqstar{margin-bottom: 20px; margin-right: 80px} .section fieldset { clear: left; width:100%; padding: 5px 0; color: inherit; background-color: #CCCCFF; border:1px solid #A9A9A9; } #sectionDocument {padding-right:0px;padding-top:8px;margin-left: 30px;margin-right:30px; border:1px solid #A9A9A9}} #sectionDocument, .sectionContent #sectionDocument select, #sectionDocument input {margin-bottom:10px;} #sectionDocument #aq2822, #sectionDocument #aq2824 {width:400px;} #sectionDocument #aq2822 label, #sectionDocument #aq2824 label {width:40px;} .submit input, #footersubmitbav div input, input.chpbutton, input.footerbutton {font-size:12px; font-family:Arial,Helvetica,sans-serif; border: 1px solid #7F7F7F!important; background-color:#547EA8!important; text-align:center; cursorointer; text-decoration:bold !important; font-weight:normal; color:#ffffff;padding:4px 6px 4px 6px !important; } /*Job summary headers*/ .headerlabel1, .headerlabel2, .headerlabel3 {font-weight:bold;color:#A32425;} .headerlabel1, .headerlabel2 {padding-left:0px;} .headervalue1, .headervalue2, .headervalue3, .headerlabel1, .headerlabel2, .headerlabel3 {font-size: 14px;} .headerlabel3 {padding-left:0px;} .bodyAppProc h4 {font-size: 17px; font-weight:bold; color:#A32425;} .bodyAppProc h5, .bodyAppProc h6 {font-size: 14px; font-weight:bold;color:#A32425;} .bodyAppProc input, .bodyAppProc textarea, .bodyAppProc select{font-size: 11px;} #saveApp {margin-top:20px; margin-bottom: 20px;} #step_navigation_content, #content h4{margin-left:00px;} #headertable{padding: 10px 0px 10px 0px; line-height:1.7em; } .section h5{padding-left:0;} #chpCreateSection {border-left:1px dotted #C8B08BF!important} #step1input input, #step2input input,#step2input input,#step3input input, a.currentStep {font-size: 14px!important} /* migration 28B -> 28C */ #sMobilePhoneNumber {width:220px;} #tem {border:none;} #sectionWelcome {background-color: #fff} /*MedusaTech Additions*/ #aq6783 {margin-bottom:10px} #aq6696 {margin-bottom:10px} #aq6700 {margin-bottom:10px} #navbarValue a, #navbarValue input {font-size:14px;color:#4F6DB6;text-decoration:none;padding-top:1px;} #navbarValue a:hover, #navbarValue input:hover {text-decoration:underline;} #navbarValue .disabledLink a, #navbarValue .disabledLink input {color:#000000;} #navbarValue .disabledLink a:hover, #navbarValue .disabledLink input:hover {text-decoration:none;} #navbarLabel {font-size:14px;} .navbarLine {padding:0;margin:0;} #sectionAttachContent {border: 1px solid #A9A9A9;} .label {width:242px;} #sectionAttachContent .value {} Hi all, I have a small problem with the new design for my website and after trying things for like 30 minuts and asking some other people I decided to give up and try here. It's probably going to be something very simple but I just can't figure out what Website: URL CSS: URL Explaination pictu URL The first part is how it shows in Internet Explorer, the second shows Firefox and the third how it is supposed to be. I hope somebody can help me with this. Thx in advance. Greetings, Sjoerd |