Im having some issues with my layout in IE6 (corporate business, ideally id tell them to shove ie6 :P)
Link to the site is http://www.clickcommercial.co.uk
Ive just applied the twinhelix png fix method and that "appears" to have worked ok - but I was under the impression it should fix the issue with repeat backgrounds?
As you can see, the site works great in IE7+, firefox, safari etc :)
Any help on this is appreciated! :)
To fix position of right navigation add this to your code:
#homebox-right { overflow:hidden }
Regarding other issues, I'd reccomend you to install IE Tester where you can preview stuff on IE6 quite easily. You must play a little with margins for IE6.
Plus, I'd recomment to add: img { border:none; } to remove ugly borders from link-images.
Related
Okay, I have used reset CSS files for quite a while and they have usually worked, but since I have started using CodeIgniter (I don't think that has anything to do with it) there has been whitespace around div's that are unaccounted for and persistent across Firefox, Safari and Chrome. I took a screenshot of what I am talking about (the orange arrow is pointing to it):
Any help would be greatly appreciated. Like I said, CSS reset's don't appear to be working.
add display: block; to the img it will remove the extra white space check the result
and i also try the firebug and mozilla webdeveloper tool that they are great tool
i have spent 3 days trying to figure out this issue and cannot come up with a viable solution.
ive even tried using javascript to load stylesheets tailored to each browser, but even that didnt work.
my problem is my horizontal menu (http://mydomainsample.com/fire_rebuild) is displaying perfectly fine i n chrome, but when i load in safari or firefox, the child menu is way out of position. oddly enough IE(9) is closer to being correct than the other two, but even thats not quite correct.
i have played with the stylesheet trying to figure it out, but when i get it right in fff, safari, or ie its screwed up in chrome.
i cant seem to find a solution that works in all browsers.
can someone please help me find a solution to this?
ive tried using a different menu but this one looks the best and any vertical drops ive used give me z-index problems between the menu and the slideshow that i cant seem to fix.
I do not think src is an optional attribute for link tags. Replace it with hrefs like the first two. When I look at the page in firefox, I do not see two files above being imported.
The order of the files in those link tags are very important as well.
href="stylesheets/reset.css"
href="stylesheets/coda-slider-2.0.css"
I do not know if you already have them but firefox and chrome has the firebug and web developer plugins that makes life easier.
jQuery has been updated to v1.7.2; I would update all your plugins & see if that helps.
First of all, remove all the javascript you applied to match for different browsers.
Then Remove the width:750px; and left: 548px; on style.css line 83 (ul#nav li:hover > ul)
Hope this will solve your problem
Also your page width is 1220px. Stick with the 960px width in order to compatible with small screen sizes.
i am working a a WP page and having some difficulties with what appears to be the margin on the HTML element.
it displays as expected in IE8, FF, Chrome, Mobile Safari and Opera.
this is the page in question:
http://www.mmmf.net/2012/
i am using basically the same CSS as a site also done with WP which is:
http://www.mmmf.net/2011/
the only difference is a newer version of WP.
i placed a purple border on HTML for reference. i believe it's a 28px difference.
any suggestions on this would be appreciated.
thanks.
I always add a yui css reset to avoid x-browser spacing issues. Do some research on it, spend the time to re-do your css with the css reset in place (place it above all other css).
http://developer.yahoo.com/yui/reset/
The page I am working on can be found here.
In IE7, everything in the main content area is being pushed to the left...
Can someone check it out and let me know what's up?
Here is a screenshot:
I don't have IE7 on this computer, but it looks like you have float:left applied to your main div
#body_container {
float: left; // try removing this
}
EDIT
Had another look at the source and the page appears to be rendering in quirks mode in IE7.
Here are few ways to fix that:
make sure all your code is valid
make sure you are using the right doctype
Details here: Forcing IE7 into standards rendering mode (not quirks)
If this is a problem only in IE7, you might wanna try IE7 compatibility mode
Can you check this page and let me know why the menu doesn't work on IE7? It shows up all the way on the right, almost out of view.
The page works okay in other browsers (including IE8 and IE9). Thanks.
Change postition:absolute; to position:relative; in your #top-nav css ID. That will fix the position for you. After that remove position:absolute; from #top-nav li p and it will display correct.
I suggest you to download Developer Tools for IE. It helps you alot with HTML/CSS related problems when using IE.
Because you have ul#top-nav set to display:none ?
If not that, try playing with position:absolute, you have there all over the place... IE may have issues concerning that.