|
CSS - Why Does My Site Look Terrible Only In Ie8?
Hi. I have a site located at http://studentweb.stcloudstate.edu/scad0504
In IE7 and FF3, it looks great and works great (the menu nav in particular). However, in IE8, once a menu item is scrolled over, most of the page turns to white. Screeny: Can anyone help me figure out why it works this way? Similar TutorialsHello.... As I'm sure many that post to this board are, I'm pretty new to CSS. I've been reading about it for years, studying it for several months, dabbling with it for a few weeks, and writing my first useful, semi-complex CSS page for about 2 days.... My page looks exactly like i want it to (at least with my half dozen little tests so far) in Firefox. i started with no CSS, then added more and more, trial and error, until I got it just how I like it. Then I opened it in IE! OH BOY! It doesn't even look close to what it is in FF!!!!! I've read enough about CSS to assume that Firefox rendered it as it's supposed to be rendered, and IE did whatever was convenient for them. Here's the page: http://www.triptrop.com/main.html My intent: I want a header, footer, and 2 equal columns split right down the middle. Each column will contain any number of blocks one right after the other, and independent of the blocks in the other column. Don't pick on my about the colors, I'm just messin around right now Any help would be helpful (by definition) 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 Alright, I am just doing an exercise that I thought up for myself, and it's just a real basic CSS layout, except I can't get it just right. Pretty much, I have a div that if the content it holds is less than the viewers screen height, I still want the background to extend to the full height of the screen. Though, if the content exceeds the viewers screen height, I want the background to continue to stay behind the content and always match up with the bottom of the page. My troubles are as follows: Problem #1: Absolute Positioning on content Div iammitch.com/csstest/index.html iammitch.com/csstest/index2.html The white background seemingly covers the whole screen in both cases, except if you scroll down in the first example, turns out the bg only covers the INITIAL VIEWABLE area of the screen. Problem #2: Relative Positioning on content Div iammitch.com/csstest/index3.html iammitch.com/csstest/index4.html Now if you notice in this case for the text that exceeds viewable screen area, the background extends with it, instead of just filling the initial screen area. But, in the second example the background is the height of the Div's content.... So notice how the problems swap with the different positions? I've been trying to get this right for several hours now, and it's just not happening. If anymore information is needed, or you want an image of the exact layout i'm looking for let me know. I appreciate your help, thank you. 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>
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 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. Hi I need css help to make it a 3 column and add google adsense to my site its a music portal my18friends.com 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 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 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 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. Has anyone got any advice/experience on how to manage the css issues related to a site with upwards of 7, 000 pages. The client wants to have at least 60% of the total pages in the site to be bespoke in terms of design and layout and obviously this will create some very big challenges in terms of planning and implementing the css. The reason why they want so many bespoke pages is because a site with that many pages would make for a very boring user experience if there was just one design and layout site wide. Any suggestions or advice would be great Cheers Hi, I was wondering if anyone could offer any advice as to why this page is screwed up in IE7 only. http://www.zeligsoft.com/SDR-tools-products.cfm As you can see the content gets cut off at a certain point, while in IE6 and FF it properly extends the div. hey guys is there a way in css to make the contour of your web site thicker? cause lets say i sat my border it sets all the borders not the outside one? look and see what i meen..im waithing to fix the reste before incase i have to redo the hole thing..lol it looks very plane.... http://autoperfectson.ca/aps4/ New site under development and a <li> nav menu isn't working in IE7. This has totally flumoxed me and there's a bit on the web about it, but anything I have tried has not worked. three60design.com/sky_site/home.htm Also am trying to reduce the distance from the heading "Services" to the start of the content. Any ideas on both issues??! BTW I have validated XHTML and my CSS and the error remains.... Many thanks in advance Gerry |
|||||||