I am designing a site in wordpress, but am having a problem with the code in IE. It is fine in Firefox, Opera and Safari. The top bar with the adsense plus the left menu with the bullets are the problems that I am having. http://waynerooneyonline.com/wordp/ Style: http://waynerooneyonline.com/wordp/w...lumn/style.css Any help would be greatly appreciated! thanks
I couldn't even find your css sheet... I found like three others but they were for some "album" thing... *Edit, my browser found it at (the above address up to "wordp" and then /wp-content/themes/blue-zinfandel-3column/style.css) but there are like 5 or 6 other css files in this thing... For your list on the left, give more left padding to the li's so the image isn't starting in the same place as your text. list-style-image might already add some padding because it puts the image in the place of the bullet, which there's already space for... It's not fine in my FF. The Ads By Google clickie on the left is sticking out of the left edge, and the word "LINKS" is sticking out the right. There needs to be a width to the main container and the "contact, disclaimer, links" can either be floated right or you can take them now and give more right margin. On my FireFox, the upper left links say Rooney Injured, United, Manchester, Man Utd.com. On my fake IE6, they say Rooney Injured, Manchester, Man Utd.com, and England Sport. Very strange, and hard to read the code. Also CSS errors my browser found: /************************************************ * Search Form * ************************************************/ #searchdiv { margin: 0px; padding 0px; <--- no colon after "padding" } #thumb { margin: 0; padding: 0; list-style: none; whitespace: no-wrap; <--- no hyphen... it's "nowrap" text-align: center; } The above is also at #logo, #thumb2... tr > .tableS { background-image: url(http://www.meebome.com/meebome/skin/default/img/corners/white-white-s.gif); background-repeat: x-repeat; <----it's repeat-x } ... My browser also doesn't know what to do with all the javascript that's sitting as if it's CSS, like * html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); <----??? Look, whoever wrote this, they had a lot of balls if they asked money for it.
Thanks for looking. I have corrected the things you noted. I tried giving the list more padding but nothing happened. The main container has got a set width, but it seems that it doesn't quite work anymore. thats because they are google ads. they are different everytime the page loads.
Ah, the way they were positioned, I thought they were part of the page! Yeah, the way this is built, it's hard to see what all is going on... Where exactly are you adding the padding (for the menu?)? And, are you using a background image for the little ball, or list-style-image? The CSS errors I wrote above are only some of them, there were many. I dunno that the js stuff in the CSS is an error or maybe something that only works for IE. I know that my browser considers it an error and ignores it (FF1.5). It's really hard to do with a template, but it's easier to deal with a site that is 1. simplified 2. valid I'm sure I only ran across the occasional error and there are surely more. Send the page to validator.w3.org for the html and the css (all of them, though really, there should be one css page... just easier and less files for the browser to load) at http://jigsaw.w3.org/css-validator Hopefully one of the Crusty Old Guys will take a look, they can even parse the tangled web of template code.
This is the code for the menu: #l_sidebar2 li { padding:0px; margin:0px; background-image:url(images/menu_background.gif); background-repeat: no-repeat; list-style: none; } I tried adding padding there, but nothing moved at all. Yeh I think other browsers ignor the IE stuff. Thats not an issue I don't think. There is just one css file. The others are added automatically by any plugins and don't need to be looked at. I have installed a separate version on wordpress with the original template. http://waynerooneyonline.com/wordptest/ It seems that the main problem is coming from the bg.gif and content.gif in the body and #wrap. It seems that both the images move when the page is resized, moving all the content. Is there a way to fix them, so they don't move? body { background: #EFEFEF url(images/content.gif) top center repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px auto 0px; padding: 0px; } #wrap { background: #EFEFEF url(images/bg.gif) top center repeat-y; color: #333333; font-size: 11px; font-family: Verdana, Helvetica, Sans-Serif; margin: 0px auto 0px; padding: 0px; } thanks
#l_sidebar2 li { padding:0px; <--- you changed this to padding-left: 7px; or something? margin:0px; background-image:url(images/menu_background.gif); background-repeat: no-repeat; list-style: none; } Code (markup): Here's something that may look better (preserves the "default" padding but you may still need more for the image size): #l_sidebar2 li { list-style-image: url(images/menu_background.gif); padding-left: 3px; <--play with that to whatever looks good list-style-type: circle; <--use whatever default you want here if you don't want the browser to use its default, for people with images turned off margin: 0; } Code (markup): If there's still a problem with overall positioning, you could state it explicitly... but it's looking mostly okay on my screen except for the stuff spilling out at the top. If the edges of that is #wrap, then try giving #wrap a set width. Be aware that older IE has some issues with width and height, assuming that they are minimums... Templates are much harder than regular code to change stuff in... there's so much extra stuff going on, you change one thing and some mysterious something comes out to bite you. That said, it seems that menu at least should be pretty easy to fix.
I have tried changing the padding on both my old code an the new stuff you suggested, but it seems something is stopping it working. Also the images didn't show up when using the new code. I've nearly fixed the other problems with some playing around. I just need some help with the bar under the header image. I have got the google ads on the left and items on the right to line up, but am not happy about the way I did it. Also it causes the bar to be too thick. #googlead { text-align: left; position: relative; Margin-left: 0px; } #barmenu { text-align: right; position: relative; Margin-right: 0px; font-family: Times New Roman, Helvetica, Sans-Serif; font-size: 14px; color: #333333; text-decoration: none; text-transform: uppercase; top: -14px; } #navbar { background: #FFFFFF; width: 960px; height: 8px; margin: 0px auto 0px; padding: 8px 0px 20px 0px; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; } There is obviously something else controlling the height.
The padding isn't working because of the other l_sidebar code overriding it. I'm trying to work it out now.