Hi there - working on an ecommerce template for a site on the Volusion platform. Using a search box - and trying to style it to work with all the browsers. Of course- it’s giving me fits and breaking apart my tables on the top of the site where the search bar is in IE only. Not doing it in any other browsers that I have yet to verify.
Any ideas?? I’ve been fiddling for days on this one, trying block display, removing style completely, - it seems to be directly related to the search box. Any ideas are greatly appreciated as my brain is mush.
That’s a very old fashioned page mark up wise so I’m not sure there’s a lot we can do to patch it up.
First of all add a doctype otherwise all versions of IE will be in quirks mode and use the broken box model among other bad things. As you are using deprecated presentational attributes you’ll have to stick to transitional.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The gaps in the cells are due to the images which need to be set to block.
img{display:block}
That will cure most of the gaps. If you need any inline images then just add a class to them and set them to display:inline.
Your header is wider than the page body so that when you close the window the body comes away from the header. Increase the body content to match the header size so that they at least stick together.
.main_content{width:1152px}
All your JS mouseovers should be done more simply with css and cut out 90% of your code.
Hi Paul - thank you. Yes I know it’s very old fashioned. I’m old, LOL. I am working real hard to get up to speed on the latest and greatest - old habits die hard. But I know pure CSS rollovers are much more efficient and usable. I’m trying… SIGH
This did cure the gaps. THANK YOU SO VERY MUCH FOR YOUR HELP.
I know the methods of accomplishing the design could be done more efficiently and I’m working on that. My CSS skills are growing, but it’s hard to get away from JS.
I typically edit an existing template HTML file when working with this particular E-Commerce system, and this template does not have a doctype at all. I always forget to put that back in, of course - I can never get these sites to validate - for the life of me. But that’s for another day!!
