Hey guys, I really need help, my website (www.listendog.com) is showing up strangely on other internet browsers, it shows up fine on Internet Explorer, but I used a tool to view what it looked like on other, and the header is all wierd and the sidebar is below the content... it is just a normal web design, can anybody help? I have no idea what the problem is. Any ideas? Thanks guys, I need help asap. :S
can you post a screen shot of what it's supposed to look like? It's showing up weird for me in Internet explorer as well. Design looks nice though! =)
Yeh, here is what the header and sidebar (the whole base) is meant to look like: Thanks, I hope you guys can help.
@ cipals, I tried that, how do I make it so that it is centered? Because if I add that, there is no like center tag I can add lol so is there any CSS that I can do?
Internet Explorer is the worst browser on the planet and you used it to design your site. It will soon be 11 years behind web standards and incorrect in its implementation. Never, ever use IE as a reference for how things should work. Always, always use a modern browser, such as Firefox, Opera or Safari as your reference browser. Check in IE as you go along to see where it screws things up but, once you are done, everything should work in the modern browsers. Fortunately, the hacks to fix IE are known. In addition, you have 70 HTML errors and 7 CSS errors. Validate your markup for those lists of errors.
A couple suggestions: 1) You don't need the div around the <h1> tags. Instead, in the CSS, use "visibility:hidden", or, better yet, "text-indent:-9999px" on the h1. 2) Remove "margin-top:-135px" from the h1. This is what was messing the header up. 3) About the secondary content, (right column). It's not necessary, but since you have a fixed width, you may as well use fixed width (px) margins. (When you add padding, as you may know, that actually changes the width of the element it's added to.) So, if you decide to keep padding in ems, switch your width to 195px. Otherwise, use px, keep the width of at 210px, and make the necessary adjustments. Though I don't have access to your images, I checked these in IE7, FF, and Safari and they were fine. Also, as someone else suggested, it is helpful to validate your HTML and CSS. You may catch something that's throwing you off, and save yourself some trouble! : ) Hope this helps. Let me know if you have any questions.
in your style.css #masthead h1 { font-size:3em; font-family:"trebuchet ms"; margin-left:1em; color:#FFF; margin-top:-135px; margin-left:130px; } This is the reason. There are also many mistakes e.g. <div style="position="absolute" visibility="hidden"> in your page. Maybe you need to check your coding or even do it again.
Wow guys, thanks for all the help so far, tried it out and testing it on the things that views is in other browsers, hopefully it will turn out good! Thanks anyway for all your tips and corrections! *EDIT* Done, thanks guys, it looks fine now , maybe you could all check again and browse through other pages, just incase I left some pages unedited, if not, dont worry, but thanks loads!
Glad things are working for you. I took a quick look... maybe an oversight on my part, but I don't see your h1 tags. Hmmm.... Again, glad it's working! : )
Yeh, the whole point was that the H1 tags were not to be seen as it looked wierd, but they were the thing that ruined the layout so I had to remove them, anooying for SEO but at least my site works, thankd for all your help
Okay. Well, it's up to you, but the "text-indent" property on the h1, with a negative value, will pull the text "off" the screen, so that it's not visible. That way, (for semantic and SEO reasons), you can still have your h1 tag. But, again, it's up to you! : )