Jump to content

Issues With Preview


Kriptex
 Share

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...