Pages and Browsers
Moderator: General Moderators
- nickman013
- Forum Regular
- Posts: 764
- Joined: Sun Aug 14, 2005 12:02 am
- Location: Long Island, New York
Pages and Browsers
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.
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
- nickman013
- Forum Regular
- Posts: 764
- Joined: Sun Aug 14, 2005 12:02 am
- Location: Long Island, New York
Re: Pages and Browsers
"Doctor, I'm sick"nickman013 wrote:Is there anything I can do about this so its works with all browsers.
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.
- nickman013
- Forum Regular
- Posts: 764
- Joined: Sun Aug 14, 2005 12:02 am
- Location: Long Island, New York
Everypage changes, and I asked many people to go to it, different storys.
A link to the page would be,
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.
A link to the page would be,
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.
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.nickman013 wrote:Everypage changes, and I asked many people to go to it, different storys.
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.
- nickman013
- Forum Regular
- Posts: 764
- Joined: Sun Aug 14, 2005 12:02 am
- Location: Long Island, New York
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:
I'm not sure how it is supposed to look, but my guess is something like this works better:
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
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;
}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;
}- 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
- nickman013
- Forum Regular
- Posts: 764
- Joined: Sun Aug 14, 2005 12:02 am
- Location: Long Island, New York
It works perfect for me. Here are some screen shots of how it is supposed to look.
http://www.muot.net/myspace/s1.tiff
http://www.muot.net/myspace/s2.tiff
http://www.muot.net/myspace/s3.tiff
http://www.muot.net/myspace/s4.tiff
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!
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!
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.
- 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.
- nickman013
- Forum Regular
- Posts: 764
- Joined: Sun Aug 14, 2005 12:02 am
- Location: Long Island, New York
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>- nickman013
- Forum Regular
- Posts: 764
- Joined: Sun Aug 14, 2005 12:02 am
- Location: Long Island, New York
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!
thanks so much!
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:
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;
.....
}- nickman013
- Forum Regular
- Posts: 764
- Joined: Sun Aug 14, 2005 12:02 am
- Location: Long Island, New York