|
CSS - Layout Looks Good In Ie But Not Mozilla,firefox
Hello all, I recently redesigned my site from table layout to css layout. when viewed in ie it looks good however when viewed in anything else the layout falls apart. the link is:
Benefit Solutions, Inc Do i need to copy the css to the site? I'm not too sure how to go about getting the help i need. any opinions would be appreciated. thanks in advance Similar TutorialsHello, I have this layout in CSS for my website www.websitemeester.nl , in Firefox it looks perfect, but IE ****s the whole thing up. Who knows why that is? How can I make it a lil better for IE? Thx, Jules #top { margin: 0px 0px 0px 0px; padding: 10px; border-bottom: 0px solid black; background: #efefef; height: 100px; voice-family: "\"}\""; voice-family:inherit; height: 40px; } html>body #top { height: 40px; } #left { position: absolute; top: 60px; left: 0px; margin: 0px; padding: 10px; border-right: 0px dotted black; border-bottom: 5px solid yellow; background-color: orange; width: 170px; voice-family: "\"}\""; voice-family:inherit; width: 150px; } html>body #left { width: 150px; } #middle { padding: 10px; border-top: 5px solid orange; background: white; margin: 0px 150px 0px 170px; } #right { position: absolute; top: 60px; right: 0px; margin: 0px; padding: 10px; border-left: 5px solid orange; border-bottom: 15px solid orange; background: #efefef; width: 150px; voice-family: "\"}\""; voice-family:inherit; width: 130px; } html>body #right { width: 130px; } Hey gang, Ok, this is embarrassing, but I'm currently working at redesigning my website (here), and would love to get rid of the craptacular tables-based layout. I've spent the last few days googling for a good two-column header and footer tutorial but I can't see any that works well and explains what is going on ( I'd rather know what's working than cut'n'paste someone's css scheme ). I'm not too worried about <IE5.5/etc compatibility as most of the data on the page is UTF-8 ( and IE5.0 - 5.5 makes up 1.49% of my visitors ). This is what I have so far - I just need to get rid of those two cells! Can anyone point me in the right direction (or laugh hard at my crappy google-skills ). My desired layout is working the way I want it to in IE, but not in any other browser. I've been messing with the layout and the CSS for a while now, and I'm officially at a loss. I set the height of the div that the content is in, but when the content were to overflow, I want the background image to repeat. If you enlarge the text a couple of times using Apple + or Alt +, you will see what I mean. Example HTML: <body> <div id="bodycontent"> <div id="content">Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br />Content comes here.<br /><br /></div> <div id="signup">Sign up comes here.</div> <div id="footer">Footer links come here.</div> </div> <div id="coverart"><img src="images/artwork0105.jpg" alt="Strut Magazine Cover Art" border="0" /></div> <div id="topmenu">Menu comes here.</div> </body> CSS: body { font-family: Arial, Helvetica, sans-serif; font-size: 10px; background-color: #FFFFFF; margin: 0px; } #bodycontent { width: 750px; position: absolute; top: 28px; background-image: url(images/bg0105.jpg); background-repeat: repeat; height: auto; } #content { width: 276px; margin-left: 474px; height: 704px; } #topmenu { height: 27px; width: 749px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; border-right-width: 1px; border-right-style: solid; border-right-color: #000000; background-color: #FFFFFF; vertical-align: top; position: absolute; left: 0px; top: 0px; } #signup { color: #FFFFFF; background-color: #000000; text-align: center; width: 750px; height: auto; } #footer { text-align: center; width: 750px; background-color: #FFFFFF; height: auto; } #coverart { height: 704px; width: 474px; position: absolute; top: 28px; } Thanks! I know it's an age old problem, and I know there should be many links in the forums showing me where to go...the thing is that I don't think I'm doing anything wrong. http://www.rocksolidhq.com/anmar/index.php , renders fine in IE but not Mozilla. Simply going into the CSS and changing the margin-top on the #container OR moving #services_blackout higher fixes this. I'm wondering if anyone knows wether I must fix something or whether in this case one of the browsers has a bug and needs a separate style sheet. I have looked at this a million times and now I've completely lost track... This is the layout in IE: as you can see, it looks perfectly fine, just like I wanted it to look...but then... this is how it looks like in Mozilla: The lay-out is all messed up..it seems like there is a fault in the code with the top left floater..because the right floater only begins at the same point the top left floater ends... I truly want this to look fine in both browsers...even though the most people use IE... (the page is at http://www.finedesigns.nl/portfolio/voorbeeld huisarts) this is the coding: body { background-color:#FFFFFF; text-align: center; } a { font-size:10px; text-decoration:none; font-weight:600; font-family:verdana; } a:link {color:#006666;} a:visited {color:#006666;} a:hover {color:#CC9900;} #container { background-color:#006666; margin-left: auto; margin-right: auto; text-align: left; width: 100%; margin: 10px auto; font-family:verdana; font-size:10px; color: #006666; line-height: 120%; } #Header { padding: 5px; height:100px; } #Left { float: left; width: 150px; margin-right:5px; margin-left:5px; background-color:#CCFFCC; } #Left2 { clear:left; float: left; width: 150px; height:210px; margin-right:5px; margin-left:5px; background-color:#CC9900; } #Right { float: right; width: 150px; height:450px; margin-right:5px; margin-left:5px; background-color:#CCFFCC; } #Content { background-color:#FFFFFF; height:450px; margin-left: 160px; margin-right: 160px; padding: 10px 10px 10px 10px; } #Footer { clear:both; background-color:#006666; padding: 0px; height:5px; } I'm having a lot of trouble getting a couple of final things to work on this CSS template design I'm doing for one of our stores. http://www.thescriptstation.com/catalog/index.php?tplDir=CSS-fluid-1 (the ?tplDir=CSS-fluid-1 is necessary to see the developing template instead of the live one) It's all looking pretty much how I want it, with a couple of exceptions, and I'd love some help with what I'm doing wrong here. Issue 1 Links in the top green bar and bottom green bar on the page - earlier I had them looking fine in FF (using margins, positions, and padding), but looked in IE and it was a big mess. So I backed up and worked on it in IE, and now its looking OK there, but in FF, I'm losing the links after the first one - it seems like they are displaying underneath one another, which is below the size of the containing style. Issue 2 In the same areas, For the life of me I can't find a way to vertically align those links inside those areas. They just go to the top no matter what I've tried. If anyone could look over the styles and see what I've done I'd be forever grateful: http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/stylesheet.css http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/main_layout.css Many Thanks hey i am new in developing sites with css codes so i started coding my home page with all the css code that was required and when half the page was done i checked it in the browser. so it looks good in firefox but it looks messed up in IE. So please suggest me something to fix my problems. I am using Dreamweaver to develop my site. None of the browsers are looking correctly except Firefox actually. The worst is the rendering in IE. In Mac (5.x) it's the worst but in the Windows version my global navigation bar goes off the right side (XP Pro). In Mac/Safari the drop down items don't show only the divider | does though the links are hot. I haven't even tried Opera or Netscape. Anyone have a clue at all? I should have stuck to tables! Ugh. http://www.blaynecooper.com Steph I'm designing a site and have an absolute div with a z-index of -1. This div has a background image. On top of this div I have a normal layout table with my content, in effect I wanted a background image that didn't tile, so I threw it in a div. When i view it in IE6 everything looks nice, but when I view it in firefox, the image doesn't show up, the dive borders dont show up and any text I put in the div doesn't show up. Any thoughts or workarounds why the image isn't showing. Thanks chuck_samsonite _______________________________________________ Lloyd: Oh yeah! It's right here, Samsonite! I was way off! I knew it started with an S though! OK, I've been working with Firefox for a long time, and it usually serves me well for all browsers except IE. Now my design/CSS only looks good in firefox 4.0.1 and not Safari, Opera, or Google Chrome, and I'm really upset. Why are the other browsers displaying my CSS improperly? Is there a hack for all browsers now? OK, here's the site: http://www.caillouette.com/Diesel_site7/ Any info or insight is greatly appreciated. thanks -S 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 Hello, I'm going nuts over a (probably very simple) problem in my CSS layout coding. Everything works perfectly in IE 6.0 but not in mozilla (any?) and FireFox 1.0PR. I believe the same problem is found in Safari on MAC as well... The problem is, I can't get two "content boxes" aligned side by side in my "main content" area. Take a look at this page : The whole layout You'll see that the box "test55?" and "test66?" is not aligned side by side as they should be. Everything else in the layout works out OK. If you look at this page : Stripped layout You'll see the same problem, but I've stripped out all the other code. Even if I expand the length of the "content div" it won't align side by side, so there's not a "space" problem. I'm sure it's a very simple solution, but I can't seem to find out what it is.. Help! PS: everything works in IE 6.0 (on XP) so don't bother look with that browser unless you want to see what it should look like Thanks, Sep This is just driving me up a wall here. It's been like this for a while, and I never cared b/c I don't use IE. My viewers, however, do, and it's an eyesore. Link to crappy page This is a sidebar I have on all the pages. It grabs the latest 10 threads from the forum. Gets the latest 10 additions to the database, and finally gets the top 10 viewed items. As you'll see (specifically in the top entry of the top list (latest news) it messes up the vertical alignment for some reason. AFAIK, my CSS is fine. Again, this problem only exists in IE. Thanks Hi all, My first post, a request for help please! I have been designing a site and checking in Safari, just come to check in IE7 and its all over the place. I get the feeling that there is a simple bug fix I need to add, but with deadline approaching fast (tomorrow am client reviews the site) my mind is all over the place! If anyone would be kind enough to view: cavendish-cs.co.uk/beta/ You will see in IE7 the top image will not sit next to the navigation. Check in Safari or Firefox and you can see how it should look Any help greatly appreciated Thanks Craig hi all... i have a huge style sheet, and i need to convert it to display properly in IE, how do i go about doing that, not recoding all the styles, i am also thinking about the check to se which style sheet to use, i think that i saw a method to do it under the <link> tag or something ?... help a fellow out there are over 800 lines of code in the style sheet.... frank/ I'm having trouble with a layout issue. Position is fine in IE, but in Firefox and Mozilla there's a 55 pixel gap on this drop down list and an even larger gap when the list is expanded. Here's my css for the navbar: /* Navbar */ #nav { width: 158px; margin-left: 0; } #nav ul { font-family: "Trebuchet MS", serif; font-size: 11px; margin-left: 0px; list-style-type: none; } #nav ul li ul { margin-left: 12px; } Any suggestions or help would be appreciated. I'm not sure what is causing the extra spaces to the top and bottom area of the images... Code:
<div style="margin:0px;padding:0px;background-color: #FF0000;">
<img src="images/mod_bt2.gif"><br>
<img src="images/mod_bt1.gif"><br>
<img src="images/mod_bt7.gif"><br>
<img src="images/mod_bt6.gif">
</div>
Greetings... I've looked all around for a solution, and can't find one. Any help that anyone could provide would so greatly appreciated. My site http://www.baltimoregamers.com displays the div boxes incorectly in Firefox. I am using quite an unusual layout with one big picture as a plate for the entire site... I then lay div boxes/layers ontop of the plate to position text exactly where I want it to go. It works flawlessly in IE, but displays a too far down and to the right in FF/Mozilla. I am new to using CSS and I'm sure that something is off somewhere in the code. Thank in advance for any help. Feel free to e-mail me he dekay@baltimoregamers.com Just testing this in different browsers and noticed that the image is shown in the background but does not go to the background-position that is specified. This works for IE. Does anyone know if there is a different way of doing this? <STYLE type="text/css"> BODY { background-image:url(awesome.gif); background-repeat:no-repeat; background-position:50 220; background-attachment:fixed } </STYLE> Thank you for an insight into this little glitch. i have divs on a page, and the ones appearing on the left don't use any style (style=""), where as on the ones appearing on the right use (style="float: right; clear: right;") in IE 6 and 7, it creates the needed visuals found in the first attachted file (ie 7.gif).. as is seen, it clears the content so that the end of the divs are always in line, so that the next divs can begin properly in line in mozilla firefox (mozzila firefox.gif), it does not obey this idea, and simple starts the next divs after the end of the above ones.. you can imagine how problematic this is when some divs on the right contain ALOT of words, that should be inline with the one of the left, etc any thoughts or anything that could help would be apprciated... regards |
|||||||