Css / Html Website – Help

@squewheetJun 20.2008

I have just recently started a website. And on my screen it shows up fine in IE. But it doesn’t show up fine in firefox. I have had other people look at it and they said that It both browsers it looks off. So i don’t know what is going wrong here. Can anyone help me out here. My url is below.

[CODE]www.jonesdesignz.com[/CODE]

Thanks,

Squewheet

to post a comment

CSS

8 Comments(s) _↴

@mainenotarynetJun 20.2008 — #loooking at the source code in FF3 w/ HTML walidator I see 1 warning and another problem which may be causing the 'off' appearnce

<a class="menu" href="">Gallery</a> a blank href will validate but shows the link as doing nothing, to correct it and get rid of the warning add a # in the href= quotes

I believe the 'off' problem is caused by the

&lt;div id="menu"&gt;
 &lt;div align="justify" class="style2"&gt;

and the justify alignment.

It may look right on your screen but on lardger screens it would be off and with the blue columns you may be better off with align="center" instead

I am by no means an expert but this is what I see.

Hope this helps

Maine Notary Net

@squewheetauthorJun 21.2008 — #I tryed all that stuff and it didn't seem to work. That I know of. I am kinda new to coding so.

But anyone else have any ideas

@CentauriJun 21.2008 — #Biggest problem here is that you are floating #header2 with a width of 478px and left margin of 207px (total 685px) inside #header which only has a width of 207px, thereby shoving everything off the left of the screen. the left margin of #header2 is not needed, and the width of #header should be removed. Another problem is the manipulation of the body width, which can cause problems - do that with the wrapper :

[CODE]body {
 background-color: #000000;
 background-image: url(http://www.jonesdesignz.com/images/Background.png);
 background-repeat: no-repeat;
 background-position: center top;
 }
 #wrapper {
 width: 685px;
 margin: 0 auto;
 }
 #footer {
 background-image: url(http://www.jonesdesignz.com/images/CopyRight.jpg);
 background-repeat: no-repeat;
 height: 48px;
 clear: both;
 }
 #header {
 height: 155px;
 background-image: url(http://www.jonesdesignz.com/images/Banner-Left.jpg);
 background-repeat: no-repeat;
 }
 #header2 {
 float: right;
 height: 114px;
 width: 478px;
 background-image: url(http://www.jonesdesignz.com/images/Banner-Right.jpg);
 background-repeat: no-repeat;
 }[/CODE]

Try that for starters.

@squewheetauthorJun 21.2008 — #hey what ever you did got most of it back in line with firefox. And IE is perfect. now just my text and right and left col are off. I think it has to deal with the Margin-left but i don't know. If you could give me some advice on what to do then that would be great.

Thanks,

Squehweet

@CentauriJun 21.2008 — #Still a bit more work and cleaning up here. Big problem is incorrectly nested things - #main inside #header2, #rightcol inside #leftcol etc. The menu should really be marked up as an unordered list of links, and a number of unnecessary divs (and the deprecated "align" attribute) can be eliminated. The blockquote also should go as that is incorrect use - spacing can be provided by padding on #rightcol (and adjusting the width accordingly). Simplified html can be :

[CODE]<div id="wrapper">
 <div id="header">
 <div id="header2"></div>
 <ul id="menu">
 <li><a href="http://www.jonesdesignz.com">Home</a></li>
 <li><a href="#">Gallery</a></li>
 <li><a href="http://www.myspace.com/squewheet">Myspace</a></li>
 <li><a href="http://www.jonesdesignz.com/Forums/">Forums</a></li>
 <li><a href="mailto:[email protected]">Contact</a></li>
 </ul>
 </div>
 <div id="main">
 <div id="leftcol">
 </div> 
 <div id="rightcol">
 <p>Welcome to "Jones Designz". We are a fairly new to the community and we are here to offer you the help that you need on all your GFX. If you want to see what we here at "Jones Designz" have to offer you check out the "Forums" we have a few things in there that should help you out. If you would like to see what the community has done then check out the "Gallery". </p>
 <p>If you wanna be able to joining Jones Designz and even become a staff member. Register on our "Forums" and start talking to the community here at "Jones Designz". If you need to contact us at any time fill free email us or even send us a message on our myspace page.</p>
 <p>Thanks and we hope you will enjoy your stay here at "<span class="style12">Jones Designz</span>".</p>
 <p>Sincerely,</p>
 <p>The Staff......</p>
 </div>
 </div>
 <div id="footer">
 </div>
 </div>[/CODE]

And the css (in addition to the css I posted above) :

[CODE]#menu {
 float: right;
 height: 41px;
 width: 433px;
 background-image: url(http://www.jonesdesignz.com/images/Menu-Bar.jpg);
 background-repeat: no-repeat;
 margin: 0px;
 padding: 0 0 0 45px
 }
 #menu li {
 list-style: none;
 float: left;
 }
 #menu a {
 float: left;
 height: 40px;
 line-height: 40px;
 padding: 0 11px
 }
 #main {
 overflow: hidden;
 width: 685px;
 }
 #leftcol {
 background-image: url(http://www.jonesdesignz.com/images/Left-Col.jpg);
 background-repeat: no-repeat;
 float: left;
 height: 378px;
 width: 207px;
 }
 #rightcol {
 background-image: url(http://www.jonesdesignz.com/images/Right-Col.jpg);
 background-repeat: no-repeat;
 float: right;
 height: 378px;
 width: 418px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #CCCCCC;
 padding: 30px 30px 0;
 }
 #rightcol p {
 margin: 0 0 10px;
 text-align: justify;
 }[/CODE]

@squewheetauthorJun 21.2008 — #Hey thanks all that worked. But one last thing. At the very bottom of the page my background image isn't all the way down like it should be. so it show a big huge section of black help please.

Thanks Alot,

Squewheet

@CentauriJun 21.2008 — #That is as long as the background image is (600px), and you have specified no repeat. You would either need to modify the graphic so it is longer or is repeatable.

@squewheetauthorJun 22.2008 — #alrighty thanks man

Also in #CSS _↴

printing background images???CSS for Printers Interview style text formatting

Success!

Help @squewheet spread the word by sharing this article on Twitter...

Tweet This

Css / Html Website – Help

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Css / Html Website – Help

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴