Jump to content

Issues With Preview


Recommended Posts

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:post-86215-0-90292600-1318993996_thumb.jpg What it turnes out to be on Google Chrome:post-86215-0-43118900-1318994004_thumb.jpg

Link to post
Share on other sites

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.

Edited by Don E
Link to post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...