Ant

Thanks Ben. I tried that but it did not work. Then I recreated the PNG file and it works. All this time trying to figure it out and it must have been some problem with the original file and IE8 didn't like it. Thanks, A.

ok. I may have figured out the problem. Although, I can only go by what Browser Labs shows me. I had a blank css ID and a plugin that was causing the site to break in IE. Additionally the site will not load the top right PNG file. I cant make it a jpg as I need it transparent. Is there anything in that css that IE8 does not like? Thanks, A.

Currently, the site is now loading ( according to browser labs) in IE8 but it is not loading the css. I turned off a plugin that was giving me the blank screen and repeating images. I assume it was the plugin. How can I troubleshoot this? I have read a bunch of stuff in searches but nothing concrete or that makes sense. I tried methodically deleting code in the header etc but couldn't find the source of the problem. When i try and validate the page I get errors associated with table styling wanting to be set in css and most of the other stuff is coding which is part of a plugin or the theme. BUT this is a wordpress theme and the theme itself has the same errors and is validated. Also the theme itself runs fine in IE7, 8 etc. Thanks, A.

My site works fine on all comp sizes and ipads. However on the small 15" laptops in safari, some pages break layout. The problem pages, I believe, are ones with a floated left nav AND a table to the right. I think when I used divs to the right it stays intact. Here's an example I thought reducing the width of the table would help, but that doesn't make sense because the widths work on other computers. I cant recreate the scenario on larger computers using the zoom out feature as it still works fine. So it has something to do with the small laptop monitors, which I don't own. Any ideas? Thanks, A.

Thanks Eddie. I checked the site on 2 different PC's running IE8. Both created the weird effects I explained. I tested it in IE9 and it was fine. I also tested it in IE9 using the developer tools and chose IE8 and it was fine. BUT I don't think thats the same as viewing it on a regular IE8 version NOT using the developer tools. But I am not sure. I guess I will have to keep looking into this. I'll see if I can find some other PC's running straight IE8 and see what I can find out. I also tested the site using one of those screen shot online services and it showed the weird effects in IE8 as a screenshot. A.

When I view my site in IE8 some very strange things happen. When you load the homepage the first images get repeated, distorted and get like a jitter/smear effect on them when you attempt to scroll. Then you cant see any other parts of the site as the image just repeats and then you cant see anything else if you try and scroll back up.Here's my attempt at replicating whats happening(see image) Also sometimes it cant even load and it goes white. Because I have a mac I have to use friends machines to see how the site looks on IE. (I still have not found a solution to previewing sites on IE on a mac, which is a pain) My brief viewing of the site on IE9 seemed ok with only a few problems. So far firefox and safari are ok. Although I am having trouble with safari's zoom option. When you zoom out 3 times (option -) on the keyboard the navigation div(which is floated left) of the online store kicks over to the right about 20px and then kicks the content underneath. Not sure how to fix that. I still have to pass the site through the validator, but so far most errors are table errors that should be moved to css. I also need to clean up some other things, css etc. Thanks, A.

Thanks Ben that's what I needed. That helps clear things. A.

Ok, I got it to work, just like Andrea said. I must have had some errors in there while trying so many different variables. Here's the css I used: #online_store_link{ font-size: 17px; padding: 7px 0px 7px 7px; background-color: #1f262e; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; margin: 0; list-style: none; } #online_store_link a{ text-decoration: none; display: block; width: 161px; color:#ffffff; background-color: #1f262e; padding: 15px 0px 15px 10px; } #online_store_link a:hover { background-color: #1f262e; color: #8bab0b; } I still would like to know what the difference between these 2 types of css are: #online_store_link li{ } OR li #online_store_link{ } Thanks, A.

I had this (see code below) AFTER that CSS, but I am not sure it's done properly(I know it's not working thats for sure). I don't think i am grasping the difference between this: #online_store_link li{ } OR li #online_store_link{ } --------- #online_store_link{ style="font-size: 17px; padding: 7px 0px 7px 7px; background-color: #1f262e; color: #ffffff;" } #online_store_link li { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; margin: 0; list-style: none; } #online_store_link li a { text-decoration: none; display: block; width: 161px; color:#333333; padding: 15px 10px 15px 10px; background-color: red; } #online_store_link li a:hover { background-color: #FFFFFF; color: green; } --------------- Thanks, A.

I'm not sure if what I need help with is "specificity" or not. Here's a situation which always confuses me. (see code below) I have the navigation as I want it BUT I want the FIRST li item called "Online Store" to have a different style. So I thought if I created a class or id for that list item I could stylize it differently than the other items. The problem is I don't know how as it is being overridden by the css class for "sidemenu" Any help is appreciated. My HTML is this: <ul class="sidemenu"> <li id="online_store_link"><a title="Online Store" href="#">Online Store</a></li> <li><a title="Specials" href="#"><span style="color: #f03b0e;">★ Specials</span></a></li> <li><a title="Fly Rods" href="#">Fly Rods</a></li> <li><a title="Fly Reels" href="#">Fly Reels</a></li> <li><a title="Fly Lines" href="#">Fly Lines</a></li> </ul> My CSS is this: /*----------------store left navigation-------------*/ ul.sidemenu { padding: 0; margin: 0; list-style: none; font-family: 'Arvo', serif; font-weight: 500; font-size: 12px; width: 180px; } ul.sidemenu li { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; margin: 0; list-style: none; } ul.sidemenu li a { text-decoration: none; display: block; width: 161px; color: #333333; padding: 15px 10px 15px 10px; background-color: #d6dddf; } ul.sidemenu li a:hover { background-color: #FFFFFF; color: black; } /*----------------end store left navigation-------------*/ Thanks, A.

Thanks Andrea. Thats what I needed. I just thought there was a lot of css involved to accomplish a simple task. I guess that's the simplest way. It's amazing how time consuming something like a simple box with text and then a link etc can be to accomplish. A.

Andrea, thank you. The errors you see, for instance, the missing b, was a test for the bg but will be removed, thank you. I omitted the b so i could turn off the styling rather than deleting the whole css until I'm sure I won't use it. Yes this is a wp theme. I did not make it. I just stylized it to fit my needs. Once I am set on the site I will remove the inline styling from the head and add it to the core css. Right now the theme has an option to add your own styling in the cp. I use that to overwrite the linked css core site styling so I can see the changes without screwing up the original css. I will merge them when iI am done. I see your fix, but how do i style this part"fly line with this fly rod purchase [ $75 value" If i do it like you have it, it will appear as a regular p tag with p tag styling. (i think)I want to set off that line of text, maybe as bold etc and have control over it with css if i decide to change styling later. There are a lot of fly rods on the site and that FREE etc line will appear multiple times. So how do I do add css styling to that line. I have control over the FREE part with the span class="free" but not over the other text. Thanks, A.

Andrea here is the page. Still major work to do. The part starts at the green FREE box and ends at details]. My goal is to have full control over that part and implement the correct html/css. I know how to do it, I just don't know the right way and the most efficient less bloated way. Thanks, A.

Mick, thanks. I have been learning as I go. I started off going through the w3 online info a few years ago and reading and learning as much as I can. Obviously asking questions here as well. As I keep designing I keep learning. My problem is I don't know how to streamline my css. So, thats why I am asking this question. I'm looking for the best css approach to this situation without using the css incorrectly or creating css thats bloated and implemented improperly. I could just make a class called X for the span, but I don't know if I should use the div class to my advantage somehow in this instance. A.

Just tried changing the second span to a p tag, but that forces the line of text to the next line, so I guess it has to stay as a span? So it should be a <span class="? A.