Jump to content


Getting my site aligned in all browsers

Started by Raven-X, Mar 11 2007 12:50 PM

7 replies to this topic

#1 Raven-X

    Young Padawan

  • Members
  • Pip
  • 71 posts
  • Gender:Male
  • Location:New Jersey
  • Interests:I love having fun, programming, web design, graphic design, gaming, anime, manga, and being a student (love learning new software).

Posted 11 March 2007 - 12:50 PM

My template is now working fine in FF but not in other browsers. It would be appreciated if someone could tell me what I could do to get them to match up in all browsers. It would be even more helpful if someone could give me their msn so I could contact them about this and show screenshots over msn. Because it looks the same in opera/firefox and then reversed in netscape.

FF: http://img116.images.../9792/scmf3.jpg

Netscape: http://img116.imageshack.us/img116/5647/ne...agreenscvk4.jpg

Opera: http://img116.imageshack.us/img116/8448/op...agreenscun8.jpg

How it lines up at the bottom is caused by the padding and position of the footer image, but when I change it to work in another browser, it doesn't work perfectly in another.

a:link {
	color: #FFFFFF;
	text-decoration:none;
}

a:visited {
	color: #ffffff;
	text-decoration:none;
}

a:hover {
	color: #BCED91;
	text-decoration:none;
}

body {
font-family: verdana, arial; 
background-color: #20433d;
background: url(http://cyberghost0.freewebpage.org/Images/backgroundimage.gif);
background-repeat: repeat;
margin: 0;
color: #ffffff;
text-align: justify;
font-size: 13px;
}

#container {
margin: 0 auto 0 auto;
width: 780px;
background: #2c5e55;
border: 1px solid #000000;
}

#header {
height: 152px;
width: 780px;
margin-top: 0;
background: url(http://cyberghost0.freewebpage.org/Images/banner.jpg);
border-bottom: 1px solid #000000;
color: #ffffff;
}

#infobar {
width: 125px;
}

#affiliatebar {
position:absolute;
left:767px;
top:154px;
z-index:1;
}

#leftnav {
height: 456px;
width: 125px;
background-color: #21423a;
background: url(http://cyberghost0.freewebpage.org/Images/leftnav.gif);
color: #ffffff;
padding-top:11px;
padding-left:24px; 
}

#contentbar {
position: absolute;
top:154px;
right:233px;
z-index:1
}

#content {
height: 457px;
width: 524px;
background-color: #21423a;
background: url(http://cyberghost0.freewebpage.org/Images/mainnewssection.gif);
color: #ffffff;
position: absolute;
left: 235px;
top: 154px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding-top: 35px;
padding-left: 3px;
padding-right: 3px;
overflow: auto;
}

#rightnav {
height: 456px;
width: 105px;
background-color: #21423a;
background: url(http://cyberghost0.freewebpage.org/Images/leftnav.gif);
color: #ffffff;
position: absolute;
left: 768px;
top: 180px;
padding-top: 10px;
padding-left: 15px;
}

#footer {
background: url(http://cyberghost0.freewebpage.org/Images/footerbar.gif);
position: absolute;
top: 647px;
left: 108px;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<title>CyberGhost 0</title>
<meta name="description" content="Site built on anime, manga, and design content."> 
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container">

<div id="header"><a href="http://cyberghost0.freewebpage.org/"><img src="http://cyberghost0.freewebpage.org/Images/banner.jpg" border="0" alt="Header"></a></div>

<div id="infobar"><img src="http://cyberghost0.freewebpage.org/Images/informationbar.gif" alt="infobar"></div>

<div id="affiliatebar"><img src="http://cyberghost0.freewebpage.org/Images/affiliatesbar.gif" alt="affiliatebar"></div>

<div id="leftnav">
<a href="homepage.html">Homepage</a><br>
<a href="http://raven002.proboards45.com"><b>Community</b></a><br>
<a href="staff.html">Staff Info.</a>

</div>

<div id="contentbar"><img src="http://cyberghost0.freewebpage.org/Images/content.gif" alt="contentbar"></div>

<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porta lectus sit amet ipsum. Fusce odio ipsum, tincidunt eu, placerat sed, faucibus pretium, nunc. Morbi in odio pretium nisi gravida consequat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ornare adipiscing nisi. In nisi neque, mollis eget, venenatis non, ultricies vel, ipsum. Duis sem. Proin justo risus, sagittis id, rutrum in, imperdiet sed, lacus. Sed tincidunt, enim et elementum rutrum, ligula ante varius nulla, in mollis justo est sit amet tortor. Aliquam hendrerit, risus at scelerisque aliquet, eros nunc convallis ipsum, sit amet vestibulum arcu tellus in diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

<div id="rightnav"><a href="http://ngmaster.proboards21.com">G101 Design</a></div>

<div id="footer"><a href="http://raven002.proboards45.com"><img src="http://cyberghost0.freewebpage.org/Images/footerbar.gif" border="0" alt="footer"></a></div>

</div>

</body>
</html>

Edited by Raven-X, 11 March 2007 - 12:54 PM.

#2 _*Creative Insanity_*

  • Guests

Posted 11 March 2007 - 01:00 PM

Welcome to the world of compatibility! How many use netscape and opera these days anyway? I myself would be only concentrating on FF and IE.

#3 Raven-X

    Young Padawan

  • Members
  • Pip
  • 71 posts
  • Gender:Male
  • Location:New Jersey
  • Interests:I love having fun, programming, web design, graphic design, gaming, anime, manga, and being a student (love learning new software).

Posted 11 March 2007 - 04:11 PM

Thanks for the reply. I've gotten the template to finally look the same in all browsers except now there's a big space on the side and bottom that make it scroll to the bottom and to the right. I'm not understanding why that's happening in opera/netscape/ie but it doesn't do it in FF.

Edited by Raven-X, 11 March 2007 - 04:19 PM.

#4 _*Creative Insanity_*

  • Guests

Posted 11 March 2007 - 05:18 PM

Forget Opera and Netscape.. Just download FF and use IE Tab add-on for FF and just use them 2. If it works in both IE and FF then it is bound to work on the others. Also make sure in your CSS right at the top that you reset the browser.

*{
 border:0px;
 margin:0px;
 padding:0px;
}

Edited by Creative Insanity, 11 March 2007 - 05:19 PM.

#5 Raven-X

    Young Padawan

  • Members
  • Pip
  • 71 posts
  • Gender:Male
  • Location:New Jersey
  • Interests:I love having fun, programming, web design, graphic design, gaming, anime, manga, and being a student (love learning new software).

Posted 11 March 2007 - 07:51 PM

View PostCreative Insanity, on Mar 11 2007, 06:18 PM, said:

Forget Opera and Netscape.. Just download FF and use IE Tab add-on for FF and just use them 2. If it works in both IE and FF then it is bound to work on the others. Also make sure in your CSS right at the top that you reset the browser.

*{
 border:0px;
 margin:0px;
 padding:0px;
}

Do I need to keep those elements in the CSS file and I did refresh the browsers...

#6 _*Creative Insanity_*

  • Guests

Posted 11 March 2007 - 07:52 PM

Naa once you load in another browser the css is loaded again anyway. :)

#7 Raven-X

    Young Padawan

  • Members
  • Pip
  • 71 posts
  • Gender:Male
  • Location:New Jersey
  • Interests:I love having fun, programming, web design, graphic design, gaming, anime, manga, and being a student (love learning new software).

Posted 11 March 2007 - 11:59 PM

http://img413.images...pcg0sitepy3.jpg = how it looks in IE. It doesn't have that huge space in Firefox though.

What my css file looks like now:
*{
border:0px;
margin:0px;
padding:0px;
}

a:link {
	color: #FFFFFF;
	text-decoration:none;
}

a:visited {
	color: #ffffff;
	text-decoration:none;
}

a:hover {
	color: #BCED91;
	text-decoration:none;
}

body {
font-family: verdana, arial; 
background-color: #20433d;
background: url(http://cyberghost0.freewebpage.org/Images/backgroundimage.gif);
background-repeat: repeat;
margin: 0;
color: #ffffff;
text-align: justify;
font-size: 13px;
}

#container {
margin: 0 auto 0 auto;
height: 671px;
width: 780px;
background: #2c5e55;
border: 1px solid #000000;
}

#header {
height: 152px;
width: 780px;
margin-top: 0;
background: url(http://cyberghost0.freewebpage.org/Images/banner.jpg);
border-bottom: 1px solid #000000;
color: #ffffff;
}

#infobar {
width: 125px;
}

#affiliatebar {
position: relative;
top:-25px;
left: 658px;
z-index:1;
}

#leftnav {
height: 456px;
width: 125px;
position: relative;
top: -25px;
background-color: #21423a;
background: url(http://cyberghost0.freewebpage.org/Images/leftnav.gif);
color: #ffffff;
padding-top:11px;
padding-left:24px; 
}

#contentbar {
position: relative;
right:-127px;
top:-517px;
z-index:1
}

#content {
height: 457px;
width: 524px;
position: relative;
top:-542px;
left: 126px;
background-color: #21423a;
background: url(http://cyberghost0.freewebpage.org/Images/mainnewssection.gif);
color: #ffffff;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding-top: 35px;
padding-left: 3px;
padding-right: 3px;
overflow: auto;
}

#rightnav {
height: 456px;
width: 106px;
position: relative;
top: -1008px;
left: 658px;
background-color: #21423a;
background: url(http://cyberghost0.freewebpage.org/Images/leftnav.gif);
color: #ffffff;
padding-top: 10px;
padding-left: 16px;
}

#footer {
background: url(http://cyberghost0.freewebpage.org/Images/footerbar.gif);
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
position: relative;
top: -1008px;
left: -1px;
}

#8 Raven-X

    Young Padawan

  • Members
  • Pip
  • 71 posts
  • Gender:Male
  • Location:New Jersey
  • Interests:I love having fun, programming, web design, graphic design, gaming, anime, manga, and being a student (love learning new software).

Posted 12 March 2007 - 10:48 PM

Success! I finally got it to work in all browsers, hot damn! lol
I know what was causing the problem, two problems in particular. I was using a container to contain all the content and then I was using a "margin: 0 auto" element. I took those things out and it worked fine for me. :angrylooking:
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design