Page 1 of 2

Pages and Browsers

Posted: Sun Feb 26, 2006 10:29 pm
by nickman013
Ive been building my site on my mac, and viewing it with Safari. It looks perfect. Today I went on windows and viewed it. It looks like the codes were moved in a puzzle.

The pages are controlled by CSS, basically just DIV, FONT, inputs, tables, and links tags. Some PHP.

Is there anything I can do about this so its works with all browsers.

Posted: Sun Feb 26, 2006 10:34 pm
by anthony88guy

Posted: Sun Feb 26, 2006 10:37 pm
by nickman013
My CSS is good. It is just messy with certain browsers.

Re: Pages and Browsers

Posted: Sun Feb 26, 2006 10:42 pm
by Roja
nickman013 wrote:Is there anything I can do about this so its works with all browsers.
"Doctor, I'm sick"

We need more information. A full description, a link to the site in question, the full code to the page.. Really *anything* beyond "Its broke. How do I make it not broken?" will yield more helpful responses.

Posted: Sun Feb 26, 2006 10:49 pm
by nickman013
Everypage changes, and I asked many people to go to it, different storys.

A link to the page would be,
:arrow: here

There is a password on it because I am still working on it.

Username: edge
Password: edge

If you need the page scripts just "holla" at me.

Posted: Mon Feb 27, 2006 12:46 am
by Roja
nickman013 wrote:Everypage changes, and I asked many people to go to it, different storys.
Well, on the bright side, it looks fine in Firefox. Its just IE that refuses to move that one div to the middle. Thats the only error I see.

However, anthony88guy was right - your code does NOT validate (not html OR css). The css only has warnings, but it aint "good".

I tried a few quick fixes for the div in the middle issue, but didn't see the cause. Sorry.

Posted: Mon Feb 27, 2006 12:51 am
by nickman013
No problem, I know my css got some errors, but it is just some background errors for links and some stuff. I didnt bother fixing it until I got my entire site complete.

Thanks for checking it out though! :D

Posted: Mon Feb 27, 2006 12:59 am
by matthijs
So what are the problems specifically? On winXP FF and Mozilla it looks ok. Only thing is with resizing the window the muot_news overflows the contents. But that has to do with:

Code: Select all

#muot_news {
width:500px;
border-color:white;
border-width:5px;
background-color:#4682B4;
}
#contents {
width:50%;
margin-left: auto;
margin-right: auto;
padding: 15px;
}
I'm not sure how it is supposed to look, but my guess is something like this works better:

Code: Select all

#contents {
width:500px;
margin: 0 auto;
}
#news {
 padding:15px;
 border:5px solid white;
}
#muot_news {
 width:100%;
 margin:0 auto;
 background-color:#4682B4;
}
With things like these, always try to:
- avoid mixing % and px
- avoid putting width, padding, margin and border on the same div (box model trouble)
- work from the outrside to inside. start with the container divs, giving them a width. Then go to the child elements and give them padding, border and/or margins

Let me/us know what the problems are exactly or how you wish it to look, maybe we can help

Posted: Mon Feb 27, 2006 1:41 am
by nickman013
It works perfect for me. Here are some screen shots of how it is supposed to look.

:arrow: http://www.muot.net/myspace/s1.tiff
:arrow: http://www.muot.net/myspace/s2.tiff
:arrow: http://www.muot.net/myspace/s3.tiff
:arrow: http://www.muot.net/myspace/s4.tiff
:arrow: http://www.muot.net/myspace/s5.tiff

The problems are:

People say the contents overlap the ads.
People say that the contents are not centered, and is all to the left.
People say that the stuff in the contents run out of the blue box it is supposed to be in.

I need help fixing it, and making it compatible with all browsers.

Thank You!

Posted: Mon Feb 27, 2006 3:00 am
by matthijs
Maybe first you have to decide what kind of layout you want and secondly what method to use.
- will the content area be fixed width or fluid? (as it is now, you somehow mix them together with #contents being fluid (50%) and muot_news fixed (500px)).
- will you use tables or not? As you already have a table for the news section, and if you keep that in, you might as well extend that for the google add section. That way you're sure they will never overlap. If you choose to do it without tables, you'll have to choose for a positioning layout (using absolute and relative positioning) or floats. Both could work.

At the moment it's all mixed up a bit and my guess is that's the reason some browsers don't know what to do.

Posted: Mon Feb 27, 2006 6:42 am
by nickman013
basically I want my lay out just how it is in those pictures. if it is possible to do with tables can you please teach me how to make a table the width of the page and everything.

I actually dont care about the method, I just want it to look like it does in those pictures.

thank you

Posted: Mon Feb 27, 2006 7:30 am
by matthijs
Cleaned up the code a bit (remember to quote all attributes, no inline styles, etc). This should work fairly well in modern browsers.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
	<head>
<style  type=text/css>
a[class=alltop] {
font-size:20px;
}
a:visited {
  color:white;
}
a:link {
  color:white;
}
a:hover{
  text-transform:uppercase;
}
body {
  background-color:#00008B;
  text-align:center;/*ie5 win center workaround*/
}
#alltop {
  text-align:center;
  border:5px solid white;
  color:white;
  background-color:#4682B4;
}
#muot {
  font-size:55pt;
  letter-spacing:15px;
}
#title {
  color:white;
  border-bottom:2px solid black;
}
/* main layout stuff
---------------------------------- */
#ads {
  float:right;
  width:120px;
}
#contents {
  width:500px;
  margin:0 auto;
  text-align:center;/* part 2 of ie5win centering workaround */
  padding: 0;  
  background-color:#4682B4;
  color:white;
}
#news {
  border:5px solid white;
}
#muot_news {
  background-color:#4682B4;
}
#credit {
  margin-top:15px;
  width:100%;
  text-align:center;
  font:9px Verdana;
}

#formfont {
  color:white;
}
input,textarea {
  background-color:#00008B;
  color:white;
}
</style>
	<script type="text/javascript"><!--
google_ad_client = "pub-7870430393601446";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "336699";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_url = "008000";
google_color_text = "000000";
//--></script>
<title>muot.net - home.</title>
</head>
<body>
<div id="alltop">

			<div id="muot">
				muot.net
			</div>
			<div id="menu">
				<a class="alltop" href="/site">main</a> :: <a class="alltop" href="/site/muotPages/muotVideos.php">videos</a> :: <a class="alltop" href="/site/muotPages/muotReport.php">muot report</a>
			</div>

</div>
		
		
  <div id="ads">
			<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
  </div>
		
  <div id="contents">

   <div id="news">
    <table id="muot_news">
     <tr><td id="title">testing cute newws</td></tr>
     <tr><td id="date">26 Feb 2006</td></tr>
     <tr><td id="story">cute news, isnt it cute?</td></tr>
     <tr><td id="author">posted by <a href="mailto:nickys@muot.net">nicky s.</a> </td></tr>
     <tr><td id="comments"><a href="#" onclick="">0 comments</a></td></tr>
    </table>
		<div id="credit">Content Management Powered by <a href="http://cutephp.com/" title="CuteNews - PHP News Management System">CuteNews</a></div><!-- News Powered by CuteNews: http://cutephp.com/ -->		
   </div>

  </div>


</body>
</html>

Posted: Mon Feb 27, 2006 7:45 am
by nickman013
Thank you, that is exactly how I want but I just got one question. For the main content, where the Cutenews is, is there any CSS command that will bring that whole box down to the center like it is in the pictures. Also the cutenews is a php include. Should I just take out the table and put the include() . I dont want to mess anything up.

thanks so much!

Posted: Mon Feb 27, 2006 8:20 am
by matthijs
You're welcome.

Centering the content area vertically wil be difficult because you will not know the browser size of a visitor, his font-size, etc. You also may not know how much content you will have.

(There are some ways to center a box exactly, but personally I don't see the point of it, considering what I just mentioned)


But you can give the content a bit of breathing room by giving it a margin top, like this:

Code: Select all

#contents {
  width:500px;
  margin:50px auto;
  .....
}

Posted: Mon Feb 27, 2006 8:22 am
by nickman013
I love it. Thanks Alot!!!