|
CSS - I Wanna Cry: Divs Taking Out Chunks Of My Page
Hi everyone. I sure hope someone is nice enough to help me figure this out... these two problems has plagued me for a long time and I simply need to ask for help. I'm new to CSS, so you'll probably see all kinds of problems other than the one I'm writing about (and if you do, please do tell me... I'm open to any suggestions on how to tweak this).
My site is http://www.kettlebell.com. But specifically, let me direct you to http://www.kettlebell.com/fitness91...the-rescue.html as it is a good example of the problems. I have several DIV tags separating the content, displaying google adsense, etc. I have a liquid 3 column layout. Some of my frustration may become more apparent as you resize the browser window. Chunks of my page get covered over with white space, which appears to be related to these div tags. So what ends up happening is that, depending on the size of the window, more or less of the content (including pictures) get chopped off... so I may have whole paragraphs missing or I may see only a strip of a photograph. For example, when the browser is fully expanded, since the text spreads over more area, it looks like the white areas get even larger. This problem reduces the smaller the window is, because the text wraps sooner, resulting in less competition for space. To make things even weirder, this problem isn't consistent in FireFox. On my PC here at home, the page looks fine. But at work, in FireFox, I have this problem. (I don't know what version I have at work because I can't check right now, but mine at home is 1.5.0.7) As may be of no surprise to anyone, I have this version in IE regardless of where I am! Also, is there a way to make it so that, when a page gets a certain width (on the smaller side), that it'll stop the columns from moving, so I can have a fixed minimum width for each column and the overall page? Because if I don't, then the layers end up covering each other when I make the page too small. I'd rather that, when I make it too small, the page stops getting smaller and just forces me to scroll to see the whole thing. Any assistance would sure be appreciated. I'm so frustrated with this. Also, if anyone has any suggestions on how I can improve the page or my use of CSS or any other tips, I'd be eager to hear them. Just please keep in mind that I am a newb. Here is my CSS... http://www.kettlebell.com/css.css (by the way, has anyone ever had their monitor start "pinging"? right now, it is intermittingly making a pinging noise and flashes a line across the monitor in different areas. Weird.) Similar TutorialsI had my css working fine and then I decided to change the layout and I almost have the new style sheet finished. However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation. However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work... Here's my css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
width: 1024px;
min-height: 748px;
margin: 0 auto;
background: #ffffff;
overflow: hidden; /* contain inner floats */
position: relative; /* establish the containing block */
}
#accounttypeselector { /* select personal or business to affect page display */
height: 25px;
background: #0000FF;
}
#servicesbar { /* container for user services */
height: 30px; /* 30px should be adequate height */
width: 100%;
}
#servicesbar-services { /* container for user services once logged in */
float: left; /* push this to left side */
width: 75%; /* want it to be 75% of the servicesbar width */
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #ff00ff;
}
#servicesbar-login { /* for user login and logout - contained inside servicesbar */
float: left; /* should push this just beside services */
width: 25%;
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #8B2323;
}
#header { /*header for the site - will contain logo, search, and main navigation */
float: left;
width: 1024px;
height: 100px;
}
#header-logo { /* will include site banner/logo - will be located on left side */
background: #ff0000;
width: 50%;
float: left;
}
#header-rightcol { /* column for search and main nav */
width: 50%;
float: left;
}
#header-rightcol-search {
min-height: 50%;
max-height: 50%;
background: #7FFFD4;
}
#header-rightcol-navmain { /* navbar that will be located below header */
min-height: 50%;
max-height:-50%;
background: #21ee00;
}
#bodywrapper { /* wrapper for main content - will have 3 columns here */
width: 1024px;
height: 100%;
padding-top: 10;
}
#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
width: 15%;
background: #8B8378;
float: left;
}
#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
width: 60%;
background: #66CDAA;
float: left;
}
#bodywrapper-news { /* news column to be located in right column of bodywrapper */
width: 25%;
background: #8A2BE2;
float: left;
}
#footer { /* footer to be located at bottom of wrapper */
margin: 0 auto;
position: relative;
width: 1014px; /* will be 1024 with padding */
height: 20px;
padding-right: 10px;
}
and here's my basic html Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test2.css" /> </head> <body> <div id= "wrapper" > <div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div> <div id= "servicesbar" > <div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> <div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div> </div> <div id= "header" > <div id= "header-logo" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</div> <div id= "header-rightcol" > <div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </div> </div> <div id= "bodywrapper" > <div id= "bodywrapper-navleft" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-main" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-news" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> </div> </div> <div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </body> </html> Thanks in advance and any suggestions would be greatly appreciated. the design for a web page i am coding calls for a floater with rounded corners and drop shadows. this is easily done by making the entire background a PNG with the corners, borders, and shadow applied (thankfully the window is a fixed size) now, ive been having no problems in the past using the following code in my javascript pop ups. however, this time i'm replacing the entire background with this and it's making everything inside of the container that has this unclickable. i realize there are workarounds to this including making everything 'inside' this window absolute above it, to only making the drop shadows transparent PNGs, but i'm hoping for a much simpler answer. does anyone know about this issue? Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='blah.png', sizingMethod='crop'); Hey everyone, I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks. If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either. I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid. Any ideas? HTML4Strict Code: Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>
So I'm working on a website of mine that needs a varying amount of content boxes (divs with content in) per page. The way I want them to display however, is the catch. So I'll explain what I want first, and then show what I've done at the moment. What I want I want them to display at around 10% from the bottom of the user's page. And be anchored to that point. So no matter what size the browser window is, the content will be fairly similarly laid out (within reason). SO. If a page needs only one content box (one div with content in), I want the bottom left corner of that div to be 10% up the users browser window from the bottom of the page. BUT. Then if I want 2 divs of content on that page, I want the 1st div to be pushed up the page by the 2nd, and have the 2nd div's bottom left corner 10% up the user's page. And then with the same pattern every time I add another div. So to try and make sure you get it, I drew these. On a page that needs 1 content box - http://img163.imageshack.us/img163/945/1div.jpg On a page that needs 2 content boxes - http://img715.imageshack.us/img715/33/2divs.jpg On a page that needs 3 content boxes - http://img693.imageshack.us/img693/1484/3divs.jpg So what I've done Is.. used a container div that is situated at that point of the page that I want the divs to align from. But because I failed at trying to relatively position them, I just positioned them with absolute values. Which is far too rigid for what I need. At the moment it has 3 divs to show the process I want. The 1st content div obviously then has to stay at the bottom, so I need to move my content to other divs when I want to add something below an existing one. Another problem/requirement is that if one of the divs has more lines of content than the other, big inconsistent gaps emerge. So depending on the size of the div, it would need to get pushed further, or less, up the page. HTML Code: <div id="content-container"> <div id="content1"> abc </div> <div id="content2"> def </div> <div id="content3"> ghi </div> </div> CSS Code:
#content-container {
width: 1px;
height: 1px;
position: absolute;
bottom: 10%;
left: 10%;
}
#content1 {
width: 600px;
height: 10px;
position: absolute;
bottom: 110px;
}
#content2 {
width: 600px;
height: 10px;
position: absolute;
bottom: 250px;
}
#content3 {
width: 600px;
height: 10px;
position: absolute;
bottom: 390px;
}
Basically I want it to be flexible, rather than rigid. Which I had hoped could be fixed with relative positioning, but I couldnt manage that. Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. I have read the other topics on the height and I have worked out a compromise in IE where I can set the height of my Divs in pixels, as I want the columns to align up at the bottom. However I would prefer it if the height was relative to the browser resolution which is what I have in Firefox by using % instead of pixels. Is there a way I could make IE use % at all? Here's the CSS concerned. Code:
#centercontent {
position: absolute;
background:#fff;
width: 78.3%;
height:auto;
min-height: 80%; /* works in FF, not IE */
margin-left: 19%;
font-family: Verdana, helvetica, Arial, Tahoma, sans-serif;
padding: 6px;
}
/* for Internet Explorer */
* html, #centercontent {
height: 600px;
}
Do ids take up space on a page if there is no content within them and no size specified for them, what about classes, paragraphs? Something like so: Code: <div id="one"></div> or <div class="two></div> <p></p> <p class ="three"></p> etc... In other words, would there be a obvious space where one of these styling markers was placed on the page? Hi, This is such a simple thing and it's causing so much grief. For an assignment in our class we are creating a calendar with tables with CSS, and one element in the table (the heading) and certain table data cells themselves must have the same class tag, but they have to do different things to their respective cells. In the heading cells i want a white background and in the other regular cells it must use a jpeg. The regular cells with the jpeg are working fine, but i can't get the buggers up top to go white. Here is my code: Code:
td.prev {background-image: url(back.jpg)}
td.next {background-image: url(back.jpg)}
th.prev {background-color: white}
th.prev{background-color: white}
Any ideas? thanks in advance. Hi please visit this page As you can see the sample text is pushed towards the bottom of the page despite there is a lot of space available on the right side of the page. here is the css I am using for the div Code: .right_sidez { float: right; width: 430px; margin: 0 5px 0 0; text-align: justify; }
according to the page dimensions it should go up to 550 px width but it works fine till 420px and after that the text is pushed towards the bottom of the page. what can I do to push the text to use all the space available on the right side ? thanks The third row as it is behaves as it should, spanning 3 columns. When I change the display style to none, the final row dissapears, which again is fine. However, when I click on the Show Description button, the textarea appears, but the first cell in the first row expands to the same width as the textarea two rows below, overwriting the colspan of the bottom row. Can anyone explain why its behaving this way? How can I fix this? Code: <table border="1" style="width:100%;"> <tr> <td width="400" align="left"></td> <td width="200" align="left"><span class="red"></span></td> <td width="312" align="left"><span class="red"></span> </td> </tr> <tr> <td align="center" valign="middle" colspan="3"> <input type="button" id="ShowDescription" value="Show Description" onclick="Desc(this);"> </td> </tr> <tr> <td id="desc1" align="center" colspan="3" style="display: block;"> <textarea cols="100" rows="15"></textarea> </td> </tr> </table> Code: <script type="text/javascript">
var state = true;
function Desc(obj)
{
if(state)
{
obj.value = 'Close Description'; document.getElementById("desc1").style.display = "block"; } else{ obj.value = 'Open Description'; document.getElementById("desc1").style.display = "none"; } state = !state; } </script>
Hi, I am new here, altough I have been comming here to search for solutions very often. I am a very great fan of CSS and have developed my own website (for my small bussiness) in pure CSS and XHTML. Now, when I started developing my website I created a layout. I have stuck with the same layout ever since. This was my idea, altough the layout is used in different ways by other websites. However something I did a lot was to browse other pure CSS websites. When there was something I liked I tried to recreate it (I never copied what other people did, always re-created myself). The problem is that I started my website with the following colour scheme; Black, White and Red. After browsing some website I must admit that I did copy coloures from other websites. Again it is only the coloures I copied! All the implementation (CSS, Xhtml, JavaScript is my own) and when there was an image I liked (for example for the borders) I recreated it on my PC. Now I am asking this question here because you people do CSS websites all the time. I know that some of you have been in this bussiness for some quite time and thus have the best advice on what should I do. Whether to leave my website as it is or else change it (note that I still did not launch my website). My question is related with Ethics as much as with legaility of what I did. I am giving some extra detail of what I mean by copy the colour scheme and recreating images. Copy Colour Scheme: Here I used a colour picker tool. I did not copy my colour scheme from just one website, but from various and used them within my layout (My layout is totaly different from the websites of which I copied the colours from). Recreating images: This has been done for the borders and shading. Again I have taken ideas from different websites. What I did is see how they did it and then recreate it. Sometimes I altered the images to better fit my requirments. However I have some images which I recreated nearly pixle by pixle the same altough I am not using the same image that the websites are using (I have recreated a small part of it). Now I checked the websites and there does not seem to be any copyright to protect images or colour scheme. Also I am not planning to insert my website for any competition. I must admit i like the design I have but not really intrested in any awards. I am new to web development and the only reason I am creating the website is because I wanted a web presence. Again, I have created all the CSS and HTML by myself using also some on-line tutorials. The only thing I see as a problem is the colour scheme and some images. dd I have a style sheet, now I am modifying some buttons on some of my pages. So I added the following to my style sheet: INPUT.NEW { background-color: EDEDED; border-color: EDEDED; color: 024467; font-family: arial, verdana, ms sans serif; font-size: 7pt; } And used the following line to call it in the button: <input class="INPUT.NEW" type="button" value="Back" onclick="document.location.href='whatever.jsp?theFlag=1'"> Which doesn't work, but if I rename "INPUT.NEW" to just "INPUT" on both pages it works. But I can't have it called INPUT because one already exists on the page. This is a style sheet that I did not write, someone else did, so I'm trying to make this change. Any help would be appreciated. Please refer to the following web site: h*t*t*p://alturl.com/iio4 As you can see in the above mentioned web site, there is a "|" menu link divider which displays between the links (About, Events, Teams, Shop). I don't want it to however appear at the end of the last link (shop). I have tried several things but can't seem to get the CSS to remove it just after the last link. Any help with this would be greatly appreciated. Following is both HTML and CSS code: Code: <div id="navigation"> <a href="/about" class="navigation-about">About</a> <a href="/events" class="navigation-events">Events</a> <a href="/teams" class="navigation-teams">Dance Teams</a> <a href="/shop" class="navigation-shop">Shop</a> </div> Code:
/***** Navigation *****/
#navigation {
background:url(../_images/menu_bg.png) repeat-x;
height:68px;
width:100%;
padding:10px 0 10px 0;
margin:0 0 20px 0;
}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/
.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
float: left;
display: block;
padding: 0 0 0 12px;
font-size: 105%;
}
#navigation-logo {
display:block;
float:left;
margin:3px 0 0 10px;
padding-right:25px;
}
#navigation a, #navigation a:visited {
display:block;
text-decoration:none;
color:#666;
padding:0 10px 0 10px;
background-image:url(../_images/nav_divider.png);
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
}
Thank you once again! If possible.. pleaseeeee provide a working CSS so I do not misunderstand you. This is basically what my html looks like: Code: <tr class=bullish><td>BLAH</td><td>blah</td><td>Blah</td></tr> Here's the relevant section of my external style sheet: Code:
tr.bullish { background-color: #CCFFCC; font-weight: bold;}
tr.bearish { background-color: #FFCCCC; }
tr.neutral { background-color: #FFFFFF; }
here is a screenshot showing the rendered webpage plus the source plus the CSS source. The background colors are for the table rows with up to 5 checkboxes. The screenshot shows them to be white, rather than the light red / light green that I'm going for. Screenshot hi.. i need to change the height of drop down box, if i change that using style means getting in firefox but not in IE.. IE taking some default height... need to avoid tht.. help me out guys.. its very urgent... pls... Layout Page I know. It's not too great yet. But I've just started and it's still in the baby stages. whenever I add a width or height paramater to "navBar" the background image NEVER shows up, even with content! Why is that? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coast Guard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
body {
background: url(Images/bgClouds2.jpg);
height: 100%;
}
html {
height: 100%;
}
.navigationBar {
width: 150px;
height: 1000px;
background-image: url(Images/navBarImage.png);
background-repeat: repeat-y;
border-style: dotted;
overflow: none;
}
#section {
padding-left: 57px;
overflow: none;
font-size: 15px;
text-align: left;
}
#top {
width: 901px;
height: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 0px;
background-color: white;
border-style: groove;
border-color: darkblue;
}
#navBar {
background-image: url(Images/navBG.jpg)
height: 73px;
border-style: dotted;
}
</style>
<script type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div id="top">
<center>
<img src="Images/CircleBanner.png" style= "border-style: none;" align="center">
</center>
<div id="navBar">
alex wait
</div>
Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE. I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action: http://www.forma3.com/stuff/css/index-v1.2.html http://www.forma3.com/stuff/css/css/index-v1.2.css I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error. |
|||||||