CSS - Css Not Rendering In Firefox
Hi
I am completely stumped by this. My CSS is not rendering in FF, I am running FF on a mac. Two pages, they are nearly the same, but show one display Css and the other does not - No CSS and With CSS I have been going crazy trying to find out what is wrong. The CSS link is here Thanks Jake Similar Tutorialsone of my client's pages is not rendering my external css in mozilla firefox. the page's index is: (URL address blocked: See forum rules) It is in a frameset... the simplest page on my site is (URL address blocked: See forum rules)/leftspacer.html. I cannot get the stylesheet to put the background image in proper alignment. PLEASE HELP! All I am trying to do is pad some text so that it is aligned vertically, but whenever I pad the text, in Firefox, it forces the parent div up, instead of the text down, which makes no sense Code: body { margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif } #logoimage { margin: 5px 0px 2px 5px } #version { font-size: 10px; font-weight: bold; margin: 4px 5px; text-align: center; position: absolute; top: 20px; right: 15px } #header { background-color: #D2E1FA; height: 20px; position: relative } #navigation { font-size: 11px; position: absolute; top: 2px; left: 20px } #userinfo { background-color: #FFFFFF; height: 13px; width: 150px; color: #000000; font-size: 10px; margin: 4px 5px; text-align: center; position: absolute; top: 0px; right: 150px } Actual html is here... Code: <img id="logoimage" src="/images/logosmall.gif"> <div id="version"> Beta Build 1000 </div> <div id="header"> <div id="navigation"> Test My Account </div> <div id="userinfo"> <b>Guest User</b> > Log In </div> </div> It actually pushes the div almost until it overlaps the image above, which makes no sense... How should I be applying the padding instead? thanks in advance! 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 here is a html page with iframe (index.html): Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>iframe</title> <style type="text/css"> #framebox{ width:200px;height:150px; border-style:solid;border-color:#000;border-width:1px; } </style> </head> <body> <div> <iframe id="framebox" name="framebox" src="iframe.html" marginwidth="0" marginheight="0" frameborder="0"></iframe> </div> </body> </html> and this is a iframe page(iframe.html): Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> #text{ background-color:#00f; border-style:dotted;border-color:#f00;border-width:1px; } </style> </head> <body> <div id="text">sample text sample text sample text sample text</div> </body> </html> run this example. the text inside #text(the div inside iframe page) is intentionally written with and iframe is given specific width and height to make iframe scroll. What happens in firefox(in opera too) is that #text div does not strech to fill entire text string but instead has width equal to width of iframe and the text kind of overflowing the div. But in ie #text div is expanding to include entire text string. IMHO is that in this specific case ie seems to be right... well, i know that ie wrongly expands containers dimentions if content is too big BUT not in this case... #text div DOES NOT have any stated dimentions so that means that i want it to adopt for whatever dimensions the content has... What do you think? Hey folks, here's an odd problem that's got me totally stumped. I've got a nine item unordered list, each of which is a link that contains both text and a background image. The background image is a large spritebox. I'm using background-position to shift the spritebox to display the sprite specific to the a:link and also to display a separate a:hover version. Looks great in Safari and CSSEdit, but in Firefox four of the links are misplaced and the sprite is incorrect. The hover state is correct, however. This is hard to explain, but the example should help illustrate the problem. My thought was that it was related the psuedo class of a:link, but nothing I've tried seems to help. Any thoughts? The example file contains both the HTML and the CSS (just to simplify this problem for this forum). The full background image and the file containing the sprites is at my website, artmeetsearth dot org slash 2011 slash codetest dot html. To get the image type socialmediaicons.jpg instead of codetest. Thanks for any help you can offer! Hello, I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering. The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents. Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table. Thank you! Crystal Hi guys, pretty new to CSS layout, and recently created a site for my girlfriend. I used 960 grid system to handle my layout css, and it renders perfectly in safari/FF/IE7+... after I installed IE Tester, i realized that IE6 wasnt rendering properly. The menu and z-index stuff arent appearing correctly. If anyone can have a quick look and let me know where my code is causing issues it would be a great help. I'm not allowed to post the URL, as im a new user, but I guess I can send through PM if you want to have a look? Thanks a bunch. Greetings everyone! I've been working on the following page for a couple of days now, and it looks fine in Safari and Firefox, but all my CSS fail in IE. I don't know what the problem is. Feel free to view the page at the following url http://www.netunification.com/demo/ I spoke with a friend and he speculates IE is having problems with the float command. I'm not so sure of this because I used the same CSS techniques while building the following site (http://www.the904.com/demo/). The904 page renders perfectly in IE and I can't figure out what the difference is between the pages. I thought I used the same concept with both pages. I've been trouble shooting the problem for a couple of days now, but I haven't had any luck. Can please someone take a look at my net u page (http://www.netunification.com/demo/) and suggest a solution Thanks in advance for any/all assistance. Your time and effort is greatly appreciated! Walt My navigation displays correctly in IE 7+ and Mozilla Firefox, however in IE Under 7 the navigation places a double line and adds additional padding to the navigation. Does anyone have a remedy for this problem? I'm helping my cousin with a design he's doing for a college class. Everything renders out a-OK in Firefox, but in Internet Explorer, the "content" gets pushed way down. The URL is http://jordanmeeter.com/captcalstudios/ . Any theories as to what is causing this? I have run into a problem in 2 of my pages in IE they Render fine in Firefox but in IE you cannot see the top part of the text and in some you don't incounter this problem. but when you refresh page the Title and author and the top text will not show in IE just disapper and it will show up when you Scroll or Highlight the text. I been trying to figure out this problem for quite sometime now. The First Page Second Page Code: .top_article_pic { float:left; margin: 0 9px 0 0; } div#articles_bg { width:850px; background:#2A475F; padding:24px; } div#articles_page { background:#FFF; border:1px solid #000; padding:12px; } div#articles_page2 { height:800px; background:#FFF; border:1px solid #000; padding:12px; } span.h1 { font-family:Arial,Verdana,Sans-serif; font-size:2em; color:#2A475F; font-weight:bold; } span.author { font-family:Arial,Verdana,Sans-serif; font-size:.9em; font-style:italic; color:#2A475F; } div#articles_page p.main_article { margin:18px 0 0 0; font-family:Arial,Verdana,Sans-serif; font-size:.8em; color:#000; } div#articles_page p.main_article_p{ width:500px; margin:18px 17px 0 0; font-family:Arial,Verdana,Sans-serif; font-size:.8em; color:#000; float:left; background:#FFF; } img.right_thumb { border:1px solid; } p.click_enlarge { font:.8em Arial,Verdana,Sans-serif; color:#2A475F; } div#articles_page p.main_article_p2{ margin:12px 0 0 0; font-family:Arial,Verdana,Sans-serif; font-size:.8em; color:#000; background:#FFF; } img.right_float { float:right; margin:0 0 0 15px; border:1px solid #000; } p#left_article { margin:10px 0 0 0; color:#000; font:.8em Arial,Verdana,Sans-serif; } p.article2 { margin:9px 0 0 0; text-align:justify; font:.8 Arial,Verdana,Sans-serif; width:530px; font:.8em Arial,Verdana,Sans-serif; } div.right_pic { width:161px; padding:10px; font:.8em Arial,Verdana,Sans-serif; color:#2A475F; margin:0 10px 0 0; float:left; background:#ccc; border:1px solid #000; } Thanks in Advance On my website IE6 is rendering a menu bar with side blocks (the 2nd green bar down in the header area). See it here. Can anyone advise a work-around? Thanks Hi there. I have discovered something odd in FF - When rendering borders, the FF engine has a strange offset. If you have the border-top:none; then the right border is exactly 1px higher than the left border. Have anyone experienced the same problem ? - Emil Hi, I've designed a site that looks excellent on IE and Firefox on a PC, as well as (as far as I've been told) Safari. However, I've seen a couple of instances on IE on a Mac where the menu doesn't render correctly. The page can be viewed here. On the problem browsers, the top menu items will be displayed in two stacks, rather than across the bottom of the image. If anyone out there has any idea why this is happening, I'd appreciate the help. The menu code in the HTML: Code: <table border="0" width="665" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0"> <tr> <td width="100%" align="center" valign="top"> <ul class="topmenuul" id="dmenu"> <li class="topmenuli"><a href="home.htm" class="topmenutitle">H O M E</a> </li> <li class="topmenuli"><a href="weddings.htm" class="topmenutitle">W E D D I N G S</a> </li> <li class="topmenuli"><a href="#" class="topmenutitle">P O R T R A I T S</a> <ul class="submenuul"> <li class="submenuli"><a href="authors.htm">Authors & Artists</a></li> <li class="submenuli"><a href="families.htm">Families</a></li> <li class="submenuli"><a href="musicians.htm">Musicians</a></li> </ul> </li> <li class="topmenuli"><a href="solo.htm" class="topmenutitle">S O L O</a> </li> <li class="topmenuli"><a href="#"class="topmenutitle">E M M A</a> <ul class="submenuul"> <li class="submenuli"><a href="bio.htm">Bio</a></li> <li class="submenuli"><a href="press.htm">Press</a></li> <li class="submenuli"><a href="contact.htm">Contact</a></li> </ul> </li> </ul> </td> </tr> </table> The CSS for the menu: Code: .topmenuul{ list-style-type:none; margin: 0px; padding:0px; } .topmenuli{ list-style-type:none; float: left; margin-left: 10px; /* border-left:1px solid #000000; */ /* border-right:1px solid #000000; */ padding: 0px; color: #000000; } .topmenutitle{ display:block; color:#000000; } .topmenuli a:link { color: #000000; } .topmenuli a:visited { color: #000000; } .topmenuli a:hover{ display:block; padding-top: 1px; padding-bottom: 1px; text-decoration:none; color:#cccccc; background:#fff; width: 120px; } .submenuul{ list-style-type:none; position:absolute; margin: 0; padding: 0; display:none; color:#000000; } .submenuli a{ display:block; padding-top: 1px; padding-bottom: 1px; width: 120px; text-decoration:none; color:#000000; background:#fff; margin-top: 1px; } li:hover ul, li.over ul{ /* lists nested under hovered list items */ display: block; } #dmenu li>ul { top: auto; left: auto; } #content { clear: left; } --> #dmenu { font-family: Georgia, Helvetica, Sans-Serif; font-size:10px; text-align:center; font-color: #000000; } .topmenutitle { background:#fff; text-indent:0px; text-decoration: none; padding:0px; padding-top: 1px; padding-bottom: 1px; color:#000000; width: 120px; } .submenuul { background-color:#fff; background-position: top left; } .submenuli a{ text-decoration: none; color: #000000; padding-top: 3px; padding-bottom: 3px; } .submenuli a:link{ color:#000000; } .submenuli a:visited { color:#000000; } .submenuli a:hover{ text-decoration: none; background:#fff; color: #cccccc; padding-top: 3px; padding-bottom: 3px; } Hi guys, I am in the process of refreshing my site however cannot seem to figure out a specific iOS rendering issue. On iOS devices (I have tested on an iPad and a iPhone 4), the menu on my website displays on the first visit, but then disappears. I cannot reproduce this on a regular desktop browser, but can reproduce the rendering issue on the iOS simulator. The CSS file is located here and the corresponding validator result link is here. This is what it looks like on first visit: And this is what happens when I refresh the page: I'm really at a loss to understand where I might be going wrong, and would be grateful for any assistance. The CSS rules for the menu specifically a Code: /* !Navigation */ #menu {background: #393 url(../images/menu.png) no-repeat !important; width: 744px; height: 40px; position: relative; margin: 170px 0 0 0; padding: 0;} #menu li {float: left;} #menu li a, #help li a {position: absolute; margin: 0; padding: 0; display: block; text-indent: -9999px; overflow: hidden;} #menu li a {height: 40px;} /* Normal State */ li#home a {left: 0; width: 79px;} li#about a {left: 84px; width: 75px;} li#journal a {left: 164px; width: 89px;} li#origami a {left: 258px; width: 97px;} li#stuff a {left: 360px; width: 65px;} li#links a {left: 430px; width: 65px;} li#contact a {left: 500px; width: 93px;} /* Hover & Current State */ li#home a:hover, #snkhan_home li#home a {background: url(../images/menu.png) 0 -40px;} li#about a:hover, #snkhan_about li#about a {background: url(../images/menu.png) -84px -40px;} li#journal a:hover, #snkhan_journal li#journal a {background: url(../images/menu.png) -164px -40px;} li#origami a:hover, #snkhan_origami li#origami a {background: url(../images/menu.png) -258px -40px;} li#stuff a:hover,#snkhan_stuff li#stuff a {background: url(../images/menu.png) -360px -40px;} li#links a:hover, #snkhan_links li#links a {background: url(../images/menu.png) -430px -40px;} li#contact a:hover, #snkhan_contact li#contact a {background: url(../images/menu.png) -500px -40px;} Any suggestions welcome! Saj Hi, Trying to get my website to work in IE7. Got to collumns. Side bar and main content. It works fine in firefox, opera and chrome but not in IE7. In IE7 the main content doesn't appear next to the side bar, instead its at the bottom the pade. The site is at accentibrass dot com If anyone has any ideas they'd be much appreciated! thanks First of all I just updated my Dreamweaver from 2004 MX to CS4. I have not used CSS before. I now want to update my sites to XHTML 1.0 Transitional and thought I would start using CSS. I am having trouble with the text losing or changing color and size once it gets posted. It looks fine in browser preview. So first some general questions. What is the difference between assigning properties to heading or class? Do I or should I use both the heading and class on a bit of text? Do I attach the style sheet to the template or to just the pages? All my pages are made from one template. I have several books, that tell how to create style sheets, but not what to do with this problem! Thanks, Jill http://codymays.net/~private_ftp/theed When viewing this page in IE6, I see the background of the content div rendered below the footer. The second you select all, click on another window and click back, or minimize the maximize the window, it goes away. Is this a problem with my code or a bug in IE (because it works in IE7). Either way, what should I do to go about fixing it? This is a bit of a weird one as its thrown me completely! I have a very simple collection of styled divs which when viewed in IE look rubbish as they have added a few extra pixels in height to the bottom. I've realized that this looks like a rendering issue as when you scroll the window down and back up the extra image thats appearing sometimes changes according to the speed you scroll at!!! (sometimes the line disappears and then re-appears if you scroll faster) I'm using IE 7 (emulated through IE8 as the real IE7 doesn't work on my vista machine????) also the IE tab mod for firefox and my brothers old xp machine with a working IE7 and the issue is occurring on all 3. However when put in IE8 mode it works Here is a lovely images to show whats going on... css + html... Code: <div style="padding:10px;"> <div style="background:url(/images/forums/middle.jpg) repeat-x left top;"> <div style="background:url(/images/forums/left.jpg) no-repeat left top;"> <div style="background:url(/images/forums/right.jpg) no-repeat right top; padding-bottom:10px;"> <div style="padding:18px; color:#FFFFFF; font-size:18px; padding-bottom:30px;">Catagories</div> <div style="padding-left:40px; padding-right:40px;"> <div style="font-size:14px;">Help and support with the Site</div> <div style="font-size:10px;">Need help with something on the site?</div> </div> <hr size="1" color="#999999" style="margin:10px 40px 10px 40px;"> <div style="padding-left:40px; padding-right:40px;"> <div style="font-size:14px;">Help and support with the Site</div> <div style="font-size:10px;">Need help with something on the site?</div> </div> </div> </div> </div> <div style="background:url(/images/forums/middle_bottom.jpg) repeat-x left top; height:4px;"> <div style="background:url(/images/forums/left_bottom.jpg) no-repeat left top; height:4px;"> <div style="background:url(/images/forums/right_bottom.jpg) no-repeat right top; height:4px;"></div> </div> </div> </div> thanks in advance for any reply |