|
CSS - In Love With Css -- But We're Fighting Right Now
I'm trying to avoid using absolute positiioning as much as possible.
I want to use paddings and those kind of things. So far I've been able to do what I want. A Problem Now. Why are the words with lines above them messing up so horribly? I have a workaround in mind, but I hate to use it... The code is a little disjointed right now. Don't mind that. CSS Code: Original - CSS Code body { padding: 0px 0px 0px 150px; } #leftSide { position: absolute; height: 100%; width: 155px; top: 0px; left: 0px; background-image: url("Images/SideImages/left.gif"); z-index: 0; } #rightSide { position: absolute; height: 100%; width: 155px; top: 0px; right: 0px; background-image: url("Images/SideImages/right.gif"); } #navLayout { width: 800px; height: 500px; border-style: dotted; border-color: lightblue; align: center; } #mainImage { width: 639px; height: 62px; padding-left: 30px; align: center; } .NavButtons{ padding: 0px 0px 0px 0px; margin-top: 20px; overflow: none; } #educationButton { width: 100px; height: 200px; } #education { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 130px; height: 47px; } #businesses { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 120px; height: 47px;
body {
HTML Code: Original - HTML Code <body> <div id="leftSide"></div> <div id="rightSide"></div> <div id="navLayout"> <div id="mainImage"><img src="Images/Layout/nandw.png"></div> <div class="NavButtons"> <img src="Images/Layout/education.png" id="education"> <img src="Images/Layout/businesses.png" id="businesses"> <img src="Images/Layout/opportunities.png"> <img src="Images/Layout/recreation.png"> <img src="Images/Layout/environment.png"> </div> </div> <body> <div id="leftSide"></div> <div id="rightSide"></div> <div id="navLayout"> <div id="mainImage"><img src="Images/Layout/nandw.png"></div> <div class="NavButtons"> <img src="Images/Layout/education.png" id="education"> <img src="Images/Layout/businesses.png" id="businesses"> <img src="Images/Layout/opportunities.png"> <img src="Images/Layout/recreation.png"> <img src="Images/Layout/environment.png"> </div> </div> Similar Tutorialsfor some reason in firefox it's putting the second data cell in my table in the next row that doesn't exist, it displays perfectly in IE, and I've triple checked my html, anyone have any ideas?? www.entsource.com/hcs Two issues I could use some help on, if anyone is willing to assist: One: I'm once again finding myself at a loss to correct an odd CSS rendering anomoly that shows up (of course) only in MSIE6 and it's Mac counterpart (but more severely in IE6/Win). Basically, I'm using the negative margins method (described here in an article we probably all know on ALA). This combines neg. margins with Dan Cedarholm's Faux Columns to create a nice two-column layout with a footer that always clears regardless of which column is longer. It could be done fluidly, but this site calls for fixed width @ 760px, so it's in a viewport div. The problem is, I'd like to extend a border {1px solid #eee} between the two columns. I assumed based on my code that I would simply apply a right hand border to the content div, and that (regardless of the non-semantic wrapper div used to keep things kosher with the faux columns) that would draw the necessary line. This seems to have worked fine (with a swap of margin for padding at the bottom of the content div, to keep the area contiguous to the footer). But in IE 6, I noticed a gap at the bottom of the page even with 0 margin. I assumed I was missing somethiing obvious like a whitespace bug for it to work in everything but IE, but alas no -- I can't find the source so I'm hoping one of you pros may do what I can not. Two: Secondly, I'm having endless problems with the "Story Options" <UL>. No matter what I try, I cannot get a consistent alignment of bullet-to-list text accross browsers. Every single one is at least one pixel different. Right now is the closest I can get things to working using background images instead of list-style-image, but frankly I'm near giving up and using a character and just scrapping the custom bullet altogether. Sadly, I may have found a solution earlier but it breaks IE5/Mac which (among other problems) doesn't seem to like background-position definitions, or at least the ones I tried. I sorta need IE5 mac support even though I would otherwise not care, because the office of the content providers for this site is entirely OS9 Mac based. Ick. If anyone knows a solution to this problem off hand though, I would seriously appreciate it before I jump off the roof Here's the code: Click here to see the template. Click here for CSS. Thanks in advance. This really should be the final nail the darn coffin for this project's CSS templates. Then I can get back to the warm snuggle of PHP -- Aiden Just so I don't feel like a moron in front of the pros: I'm totally aware I should be using an inline list with :hover for the navbar, and I'm also aware how much better my unstyled content would look if I used semantic definitions for headlines and such. The reason for the former is deadline and the fact that the current system works on every browser I've tested with - more than I can say about most of this code. The second is because <Hx> spans have an inherited top/bottom margin that extends beyond style, the only way I have found to override being negative margins. Unfortunately, IE6/Win doesn't read these right and screws the whole thing. Thus, I'm using non-semantic proprietary classes for the headlines/subheads, and perfectly OK with that for this project since it works and let's me keep the ledding nice and tight the way the client wants it. |
|||||||