Pages and Browsers

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Pages and Browsers

Post 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.
anthony88guy
Forum Contributor
Posts: 246
Joined: Thu Jan 20, 2005 8:22 pm

Post by anthony88guy »

User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

My CSS is good. It is just messy with certain browsers.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Re: Pages and Browsers

Post 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.
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post 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.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post 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!
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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>
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post 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!
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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;
  .....
}
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

I love it. Thanks Alot!!!
Post Reply