my right sidebar is apparently not displaying properly in IE6 according to two friends. i don't have it installed, working on that right now. but i'm wondering if anyone will be able to tell me the problem? hxxp://wc.forelmashi.com/ hxxp://wc.forelmashi.com/wordpress/wp-content/themes/battlenet/style.css here's the basic structure's css, it's #main-right that isn't displaying correctly, i think it's showing on the bottom #container { background: #7e7f94 url(./images/bg.gif) repeat-y; margin: auto; width: 1000px; position: relative; text-align: left; } #headernav { background: url(./images/headerbg.gif) no-repeat; float: left; overflow: hidden; width: 1000px; height: 100px; margin: 0; padding: 0; position:relative;} #main-container { clear: both; width: 970px; padding: 0; margin: 0 15px; } #main-left { float: left; width: 590px; padding: 0; margin: 0; } #main-right { float: left; width: 380px; padding: 0; margin: 0; } #footer { background: url(./images/footer.gif) no-repeat; width: 970px; height: 150px;padding: 0; margin: 0; clear: both; text-align: center;} Code (markup):
try reducing the width of #main-right or try using position:absolute; top:10px; left:600px; z-index:2; Code (markup): replace the top and left values with your own values
Those with expertise, please look at my signature site and tell me what i must do to the footer css and div tag so that it does not skew to the right and also make it compatible with IE . It looks ok on my Mac. Cheers,
There is the posibility of the double-float margin bug, although I don't see any margins on the floated things. (display:inline on the second floated thing fixes that if that's the problem). Barring that, I've had two floats easily next to each other on every browser but IE6 still. You can either take anatk's advice to make one of the floats smaller in width, or if you can increase the width of the containing #main, either of those will do it. The total width of your #main container is 970 + 15px + 15px = 1000 (I suck at math so if I did that wrong, you still know what I mean) so you could reduce the side margins a bit to maybe 5px each and then increase the actual box with to something like 990px-- the net effect should be that the #main continaing box seems the same, but there's enough room for the floats according to IE6. You need to be able to see the page in IE6 while you're testing and playing with the new widths though. You only want to increase #main or decrease the floats enough to do the job, not more than that. I have no clue what adding a z-index would do to help. It shouldn't change a thing.
Here is the full css file. I must admit that this is the problem with using ready made templates if you are not an expert. I am no expert. 990PX IS THE MAXIMUM POSSIBLE -SO I THOUGHT width for most browsers! * { padding : 0; margin : 0; } body { margin: 0px; height: 100%; font-family : Arial, Helvetica, sans-serif; color : #666666; font-size : 12px; } img { padding : 3px; border : 1px solid #888f3d; } img.floatTL { float : left; margin-right : 7px; margin-bottom : 3px; margin-top : 2px; margin-left : 10px; } img.floatTR { float : right; margin-left : 7px; margin-bottom : 3px; margin-top : 2px; margin-right : 10px; } #wrapper { width : 870px; margin : 0 auto; } #header { border : 1px solid #ccc; margin : 5px 5px 5px 5px; height : 115px; background-color : #847ec8; } .logo { width : 160px; height : 40px; background-image : url(images/buttonone.gif); margin-top : 20px; margin-left : 5px; } .logo a { color : #686b43; font-size : 2em; text-decoration : none; padding-left : 12px; line-height : 1.7em; } .advertisement { position : relative; left : 200px; top : -45px; width : 468px; height : 60px; background-image : url(images/adbg.gif); background-repeat : no-repeat; } .advertisement p { color : #f9f9f9; font-size : 2.3em; padding-left : 90px; padding-top : 10px; } .searchbox { float : right; margin-top : -120px; margin-right : 20px; } .searchbox { width : 127px; height : 60px; background : #847ec8; color : #574a22; } .searchbox form.form { width : 127px; height : 60px; } .searchbox form.form .input { width : 61px; height : 16px; color : #666; border : none; font : 10px Verdana, Arial, Helvetica, sans-serif; font-weight : bold; text-align : center; text-transform : uppercase; } .searchbox input { width : 104px; height : 16px; display : block; background : #fff; color : #000; font : 11px Verdana, Arial, Helvetica, sans-serif; margin : 14px 0 0 10px; } .breakingnews { width : 842px; height : 20px; border : 1px solid; margin-top : -33px; margin-left : 6px; background-color : #ffffff; padding-left : 3px; padding-top : 5px; } #leftcolumn { margin : 0 5px 5px 5px; display : inline; width : 170px; float : left; min-height : 300px; border : 1px solid #ccc; } * html #leftcolumn { height : 300px; } #leftcolumn h3 { background-color : #847ec8; font-size : 1em; padding-left : 7px; padding-top : 2px; padding-bottom : 2px; color : #fff; font-weight : bolder; } .menuleft ul { margin : 10px 0 0 0; list-style-type : none; margin-left : 5px; } .menuleft ul li { width : 155px; height : 15px; border-bottom : 1px dashed #868686; } .menuleft ul li a { display : block; height : 12px; background : url(images/arrow1.gif) no-repeat 0 50%; color : #888f3d; font : 400 11px Arial, Helvetica, sans-serif; padding : 0 0 0 10px; } .menuleft ul li a:hover { background : url(images/arrow2.gif) no-repeat 0 50%; text-decoration : none; color : #7e9dc8; } .menuleft ul li.last { border : none; } #centercolumn { border : 1px solid #ccc; margin : 0 5px 0 0; display : inline; width : 504px; float : left; min-height : 300px; } * html #centercolumn { height : 300px; } #boxes_I { width : 500px; height : 170px; margin-left : 10px; } .box1 { width : 240px; float : left; margin-top : 5px; margin-right : 10px; } .box1 img { margin-top : 15px; } .box1 h3 { background-image : url(images/hbg1.gif); background-repeat : no-repeat; padding-top : 5px; font-family : Times, "Times New Roman", serif; font-weight : lighter; color : #686b43; font-size : 1.5em; padding-bottom : 10px; } .box1 h4 { padding-right : 10px; padding-top : 15px; font-family : Times, "Times New Roman", serif; color : #333; font-weight : lighter; font-weight : bolder; } .box2 { width : 240px; float : right; margin-top : 5px; margin-right : 10px; } .box2 h3 { background-image : url(images/hbg1.gif); background-repeat : no-repeat; padding-top : 5px; font-family : Times, "Times New Roman", serif; font-weight : lighter; color : #686b43; font-size : 1.5em; padding-bottom : 10px; } .box2 h4 { padding-right : 10px; padding-top : 15px; font-family : Times, "Times New Roman", serif; color : #333; font-weight : lighter; font-weight : bolder; } #threeboxes { width : 480px; position : relative; margin : 3px auto 10px auto; padding : 4px 0 0 5px; border : 1px solid #ffe; } .boxone { width : 150px; float : left; margin : 0 7px 0 0; color : #524201; font : 11px Verdana, Arial, Helvetica, sans-serif; border : 1px solid #fff; } .boxone h2 { color : #333; font : 14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight : bolder; padding : 0 0 0 0; } .boxone p { padding : 0 0 0 0; line-height : 12px; } .boxone p.more { width : 66px; height : 18px; padding : 10px 0 0 24px; } .boxone p.more a { width : 66px; height : 18px; display : block; background : #7e9dc8; color : #fff; font : 11px Verdana, Arial, Helvetica, sans-serif; font-weight : bold; text-align : center; text-decoration : none; } .boxtwo { width : 150px; color : #212121; float : left; margin : 0 7px 0 0; font : 11px Verdana, Arial, Helvetica, sans-serif; border : 1px solid #fff; } .boxtwo h2 { color : #333; font : 14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight : bolder; padding : 0 0 0 0; } .boxtwo p { padding : 0 0 0 0; line-height : 12px; } .boxtwo p.more { width : 66px; height : 18px; padding : 10px 0 0 24px; } .boxtwo p.more a { width : 66px; height : 18px; display : block; background : #7e9dc8; color : #fff; font : 11px Verdana, Arial, Helvetica, sans-serif; font-weight : bold; text-align : center; text-decoration : none; } .boxthree { width : 150px; color : #333; float : left; margin : 0 7px 0 0; font : 11px Verdana, Arial, Helvetica, sans-serif; border : 1px solid #fff; } .boxthree h2 { color : #333; font : 14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight : bolder; padding : 0 0 0 0; } .boxthree p { padding : 0 0 0 0; line-height : 12px; } .boxthree p.more { width : 66px; height : 18px; padding : 10px 0 0 24px; } .boxthree p.more a { width : 66px; height : 18px; display : block; background : #7e9dc8; color : #fff; font : 11px Verdana, Arial, Helvetica, sans-serif; font-weight : bold; text-align : center; text-decoration : none; } .onemorebox { padding-top : 15px; padding-bottom : 15px; } .onemorebox h2 { font-family : Times, "Times New Roman", serif; font-size : 1.6em; color : #7e9dc8; padding-top : 10px; margin-left : 10px; } .onemorebox p { margin-right : 10px; text-align : justify; } #rightcolumn { margin : 0 5px 0 0; display : inline; width : 170px; float : left; border : 1px solid #ccc; min-height : 300px; padding-bottom : 5px; } * html #rightcolumn { height : 300px; } #rightcolumn h3 { background-color : #847ec8; font-size : 1em; padding-left : 7px; padding-top : 2px; padding-bottom : 2px; color : #fff; font-weight : bolder; } form { margin-top : 0; width : 150px; margin-left : 9px; margin-right : 5px; margin-bottom : 15px; } form p { padding-top : 10px; padding-left : 5px; padding-bottom : 5px; color : #847ec8; } .reg p { padding-left : 5px; } .textright1 h2 { background-image : url(images/buttonyellow.jpg); background-repeat : no-repeat; margin-left : 10px; font-size : 17px; font-weight : lighter; padding-left : 5px; padding-top : 8px; padding-bottom : 7px; margin-top : 15px; } .textright1 p, .textright2 p, .textright3 p { margin-top : -4px; margin-left : 11px; margin-right : 10px; border-left : 1px solid #ccc; border-right : 1px solid #ccc; padding-left : 3px; padding-top : 5px; padding-bottom : 5px; border-bottom : 1px solid #ccc; } .textright2 h2 { background-image : url(images/buttongreen.jpg); background-repeat : no-repeat; margin-left : 10px; font-size : 17px; font-weight : lighter; padding-left : 5px; padding-top : 8px; padding-bottom : 7px; margin-top : 15px; } .textright3 h2 { background-image : url(images/buttonorange.jpg); background-repeat : no-repeat; margin-left : 10px; font-size : 17px; font-weight : lighter; padding-left : 5px; padding-top : 8px; padding-bottom : 7px; margin-top : 15px; } #footer { position: absolute; left: 0px; bottom: 0px; width: 100%; display: block; height: 25px; z-index: 999; padding: 0px; margin: 0px; } #footer p { color : #a8bcf6; } #footer a { color : #a8bcf6; } PLEASE HELP.
Ah, sorry Slow, my answer was towards forel as (s)he was the Original Poster. It would have been better to post your question in its own thread (if there are mods here, they do not delete threads asking the same question over and over, so that's fine). You can make a max width whatever you want. 990 is what some people have decided is best assuming everyone in the world looking at the site has a 1024 monitor. Which isn't true at all. I really really hate templates. You can't ever tell what is affecting what because it's a huge mess of garbage. Trying to take a template someone else wrote and moving something even a little to one side or something is like trying to run on glue. Betcha it doesn't even validate, doesn't have a doctype (or any sort, doesn't have to be XHTML at all... HTML4 is fine), has 4-10 different CSS sheets for each widget, plugin, and extra.... ugh. Nasty. Also, there is no site in your signature. There is no signature at all. Do you have the little checkbox checked called "Show your signature"? I see nothing.
Thanks. I have moved the question to this thread-http://forums.digitalpoint.com/showthread.php?p=5804718#post5804718. I would appreciate more corrections. I know it is not easy. Thanks. S
tried changing widths, with and without display:inline...isn't working, i don't know what the problem is when i refresh the page, the right side is actually in the correct spot for a split second, and then it moves down. like it "blinks," don't know if that means anything..
Still looks like the floats don't have enough room in IE6. However, the CSS sheet you referenced above is NOT going to affect IE6. You've got another one for IE6 called ie.css. I hate crawling through turdpress templates, they're so full, but as the page is basically divided into header, main-right, main-left and footer, I still think it's IE6 not having enough room... except, in my fake IE 4 Linux, I don't even see the sidebar at all-- I'd expect it to be sitting on the bottom, under main-left. It's usually better to try to use one stylesheet with a page. It's always tempting to have one just for IE6 since it's so friggin wrong everywhere, but it means you've got to screw with not one but two stylesheets now. The few things sitting in the ie.css are so minimal, they could be put in the main css sheet. What happens when you make the main container like really huge? 1050px or something? What does it look like in IE6 (without the ie.css having any effect-- remove it temporarily so you can work on just the main style.css). The flash of the float in the right position... I had that too when I didn't have enough room for two floats. I'm 99% sure that's what it is. The only other thing coming to mind is, once I had a main and a sidebar and the main was always under the content of the floating sidebar and I was like, buh? And it turned out, I had a float inside the main, and then when I cleared it, it also cleared the sidebar's float too... and clearing a float made all the rest of the content fall underneath (like it should). Since you're floating both parts though I don't think that's what it is.
ie6 was added after i made the original post as a "fix".. i used absolute positioning for the problem sidebar. there was originally only 1 stylesheet i tried making it wider.. didn't work =\ the problem with this "fix" is now the height is messed up.. if the fixed sidebar is taller than everything else then the page looks messed up
Weird. The only thing I can do is try to make a real basic model of your page, test in all browsers and then let you try it... the problem being you've got lost of other stuff on the page. If I can get it all working on IE6, and you take my code and it doesn't work, then we'll have to assume there's either some other code doing something, or sometimes content makes that sidebar bigger than what you've set it too (one time I was trying out the 3-column float trick and it didn't work because I didn't have the images, so the ALT text showed, and in IE6 that text was allowed to be wider than the column which made the column itself too wide for IE6. Every other browser wrapped the text and looked normal. We'll see.
Well, I did a quickie on your page, just to see if I could get it to look right on my Fake IE6 for Linux (which sometimes renders more accurately than the Tredosoft IE6 I downloaded). **stuff removed because it's not relevant anymore!** **Also not relelvant**Looks fine. So, either something in the little CSS between the <style> tags was the problem, or that the Javascript was before the CSS, or that there was a meta tag right at the end of the head (none of these should have been the problem though, but there's a certain way we should set our heads up: head, title, metas, links, styles if any, javascripts if any). Here's the page: http://stommepoes.jobva.nl/Forelmashi/forelmashi.html Here are three screenshots of the page in fake IE6 for Linux: Dang I can't post attatchments. Links: http://stommepoes.jobva.nl/Forelmashi/forelmashi1.jpg http://stommepoes.jobva.nl/Forelmashi/forelmashi2.jpg http://stommepoes.jobva.nl/Forelmashi/forelmashi3.jpg**/not relelvant *Edit, nevermind, it seems okay on your site normally anyway... only the bottom of the right side is goofy in IE6 and that's the div class="cat-bot" which seems to be too far down in IE6. Either you'd fixed the problem or that other IE css sheet is doing its job okay (just on IE sheet then change where the cat bot is)