Kriptex Posted October 19, 2011 Share Posted October 19, 2011 I have no idea whats going on with my website, not even my web teacher knows. I dont think its my CSS file cause things like the background, Links bar, and content container are all looking fine. as you can see it isnt centerd properly. Here are some screen shots. its strange cause on the computer at my school it works fine on IE, but when i try viewing it on Google Chrome it isnt right. I got my mom to try it on fire fox and IE and it screwd up on both for her. any one have any ideas? what its supposed to look like: What it turnes out to be on Google Chrome: Link to comment Share on other sites More sharing options...
Don E Posted October 19, 2011 Share Posted October 19, 2011 Welcome. Looks like it's most likely something to do with the CSS or perhaps an image. You're welcome to paste your code here, HTML and CSS. That way, others can assist you in finding out what the problem is. Just to note though, if you look at the first image in 'what its supposed to look like', if you look at the browser, you can see the horizontal scroll bar at the bottom. Usually when that happens, it means you have something wider than the available width of the browser/screen. Link to comment Share on other sites More sharing options...
Kriptex Posted October 19, 2011 Author Share Posted October 19, 2011 Sure heres my home page .htm and css page files. could it be that the background image is a .jpg? its pretty important for me to get this working as it will be my portfolio, (THE WEB PAGE ITSELF IS A PART OF THE PORTFOLIO ISNT THAT CLEVER!) thanks for every ones help index.html main_style.css Link to comment Share on other sites More sharing options...
Ingolme Posted October 19, 2011 Share Posted October 19, 2011 First, remove every "position: absolute" you have in your document, then see what needs to be adjusted. Link to comment Share on other sites More sharing options...
Don E Posted October 19, 2011 Share Posted October 19, 2011 I've made some adjustments to the CSS file and HTML file. To the HTML file, I've added a wrapper. However for the CSS file, you'll notice the differences when you compare side to side the CSS files. You'll also see what was the problem. Basically, you had a lot of negative values(like margin-left: -295px;), with a lot of absolute and relative positioning going on. This, when not done correctly can do weird things to your page. The adjustments I made is just an example. Of course you're entitled to do whatever you want; meaning you don't have to go with what I did, but basically you'll get the idea. Perhaps some others will post and offer other solutions. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>First Page</title><link rel="stylesheet" type="text/css" href="main_style.css" /></head><body><h1> Franks Website </h1><div id="wrapper"> <div id="linksContainer"> <div class="links"> <a href="http://www.kriptex.ca/index.htm"> Home</a></div> <div class="links"> <a href="http://www.kriptex.ca/Music.htm">Music</a></div> <div class="links"> <a href="http://www.kriptex.ca/Animation.htm">Animation</a></div> <div class="links"> <a href="http://www.kriptex.ca/Games.htm">Games</a></div> <div class="links"> <a href="http://www.kriptex.ca/GraphicDesign.htm">Graphic Design</a></div> <div class="links"> <a href="http://www.kriptex.ca/Contact.htm">Contact</a></div></div><div id="contentContainer"> <div id="paragraph1"><p> In this website ill display my latest projects and designs, Things i take interest in, and other fun stuff. The interesting thing about this web site is the website itself is a project im working on.Im currently taking a webdesign class at my school.</p> </div> <div id="Twitter"><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 30000, width: 230, height: 400, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: true, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'default' }}).render().setUser('Kript3x').start();</script> </div></div></div></body></html> CSS: body{background-image:url(http://dl.dropbox.com/u/14572841/background.jpg);background-repeat:repeat-x;background-color:rgb(64,64,64);color: silver;font-family:Arial, Helvetica, "sans-serif";margin:0;text-align:center;} h1{padding-top:10px;text-decoration:underline;text-align:center;}p{font-size:20px;text-align: left;} #wrapper{width:580px;margin-right: auto;margin-left: auto;} #contentContainer{float: left;border-style:outset;width:580px;border-color:green;background-color:gray;margin-bottom:10px} #paragraph1{width:300px;float: right;margin-right: 10px;margin-top: 20px} #linksContainer{margin-bottom: 5px;margin-left: 7px;float: left;clear: both;background-color: gray;} .links{font-size:15px;padding:10px;float:left;} .links a{text-decoration:none;color:white;padding-top: 10px;padding-bottom:10px;padding-left:9px;padding-right:9px;} .links a:hover{color:green;background-color:Silver;} #Twitter{margin:20px;float: left;} #videos{margin-bottom:20px;} The above was tested on IE, FF, and Chrome. Good luck! Link to comment Share on other sites More sharing options...
Kriptex Posted October 19, 2011 Author Share Posted October 19, 2011 Thanks so much Don E ill try this out once i get to school Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.