WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > Many problems with Many Browsers

Reply
  Thread Tools Display Modes
Old 7th February 10, 05:43 AM   #1
johnny0313x
WLC Member
 
Join Date: Feb 2010
Posts: 10
Default Many problems with Many Browsers

Here is my site, only thing it is missing is news articles which I can't post just yet. The Fan Network and gallery do not need to be checked.
The home link will work once I make the site live
I checked my site in these browsers:
Mac: Chrome 3/4, Firefox 3.5.5, Safari 4.0.4, Sea Monkey 2.0.2
Problem with Firefox 3.5.5 is there is a blue box around the album image on the main page not on the lyrics page though?

Windows: Internet explorer 8
IE 8 has a weird shift on the lyrics page where the content is, the video on media page extends into the side bar, and the blue box around the album image in the header on all pages except lyrics
All FireFox versions have that blue box around the albums image in the header and a small shift at the footer
Firefox 2.0 has a huge shift with the links by the header and the content
IE 7 moves the first header of the news up into the link images & blue box on album image in header
Navigator 9/8 the whole site is a mess
Safari 4/3.2.1 has a shift for the links images below the header

I don't know how to fix these problems so help is needed.

I validated my code. I don't get most of it. I will add more alt tags but the rest has me lost.

http://www.keshanow.net/index12.php


HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />		
    <title>KeshaNow.Net - Your Ultimate Source for all things Ke$ha! News Social Network, Photos and more!</title>
    <meta name="description" content="Kesha Fansite with Media, News, Social network, lyrics, and more!" />
    <meta name="keywords" content="Kesha, Tik Tok, Pop star, Social, Lyrics, Media, News, Blah Blah Blah, Sebert, Kmoney" />
    <meta name="author" content="Jly" />
    <link rel="stylesheet" type="text/css" href="master.css" />
    <meta name="google-site-verification" content="ct9oLaPt5WpwOhRqDd6KUKEh4CxltU52srO0S9Q-I6o" />
	
	
    <script language="JavaScript">


<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=250,height=50');");
}
// End -->
</script>
   <link rel="icon" href="http://www.keshanow.net/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="www.keshanow.net/favicon.ico" type="image/x-icon" />
  </head>
<body>
<div id="header">
<div id="kesha"></div>
<div id="innerwrap">
<div id="menu"><p><?php
include("phpnews/headlines.php");
?></p></div>
<div id="album"><a href="http://itunes.apple.com/us/album/animal/id344796445"><img src="images/album.png" border="0"></a></div>
<div id="logo"></div>

</div>
<div>
<ul id="links">
<li><a href="index.php">Main</a></li>
<li id="navigation2"><a href="media.php">Media</a></li>
<li id="navigation3"><a href="contact.php">Contact</a></li>
<li id="navigation4"><a href="links.php">Links</a></li>
<li id="navigation5"><a href="http://www.keshanow.net/gallery/" target="new">Photos</a></li>
<li id="navigation6"><a href="lyrics.php">Lyrics</a></li>
<li id="navigation7"><a href="http://www.keshanow.net/knetwork/" target="new">Fan Network</a></li>
</ul>
</div>
</div>


<div id="content">
<div id="content1">

<?php
include("phpnews/news.php");
?>
</div>
<div id="sidebar">
<?php
include("sidebar.php");
?>
</div>
<div id="footer"><small><span
class="Apple-style-span"
style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Times; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; font-size: medium;"><span
class="Apple-style-span" style="text-align: center;"><small>The views
expressed on this site are in no way affiliated with Ke$ha or her
team/label. No copyright violations are intended. If there is
copyrighted information on this site, please e-mail me to remove it. <br>
<a href="index.html">Main</a> | <a href="media.html">Media</a> | <a
href="contact.html">Contact</a> | <a href="links.html">Links</a> | <a
href="http://www.keshanow.net/gallery/">Photos</a> | <a
href="lyrics.html">Lyrics</a> | <a
href="http://www.keshanow.net/knetwork/">Fan Network</a> | <a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>




</small><br>
</span></span></small></div>
</body>
</html>


CSS:
Code:
body {

background-color: #000;
background:#1E1B16 url(images/neonbg.gif);

text-align:center;

margin:0; 


}




#header{
width:800px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height:445px;
background:#1E1B16 url(images/bg_top.gif) repeat-x top;
margin-left: auto;
margin-right: auto;
}

#kesha{
position: relative; 
float: left;

    width:324px;

    height:445px;
    
    margin: 0px;

    top: 0px;

    left: 0px;

    background-color: #FF0000;
background:url(images/kesha_top.png) no-repeat;

}

#innerwrap{
	width:447px;
	height:445px;
	margin:0px;
	top: 0px;
	position: relative; 
	float: right;
	
	
}

#menu{
	width:447px;
	height:287px;
	margin:0px;
	top: 8px;
	position: relative; 
	float: right;
	background:url(images/headlines.png) no-repeat;
	
	
}

#menu p {
  margin-top: 75px;
  margin-left:75px;
  font-size: 12px;
  line-height: 1.5em;
  text-align: left;
  font-family: sans-serif;
  font-style: normal;
  font-variant: normal;
	font-weight: normal;
	font-size: small;
	line-height: 150%;
	word-spacing: normal;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	text-indent: 0ex;
	color: #222;
	
	
}

.class1	a:link {color: #E0FFFF; text-decoration: underline; }
.class1 a:active {color: #0000ff; text-decoration: underline; }
.class1 a:visited {color: #E0FFFF; text-decoration: underline; }
.class1 a:hover {color: #000; text-decoration: none; }



  
  



#album{
	margin:0px;
	width:447px;
	height:88px;
	bottom: -10px;
	right: -55px;
	position: relative; 
	float: left;
	
	
}

#headlines{
	margin:0px;
	width:447px;
	height:88px;
	bottom: 10px;
	right: -75px;
	position: relative; 
	float: left;
	
	
}


#logo{
	margin:0px;
	width:447px;
	height:88px;
	bottom: -19px;
	right: -95px;
	position: relative; 
	float: left;
	background:url(images/logo.png) no-repeat;
		
}

#links{
	margin:0px;
	width:800px;
	height:37px;
	bottom: 0px;
	right: 0px;
	position: relative; 
	float: right;
	
	
	
		
}




ul li {
	display: block;
	float: left;
	list-style: none;
}

ul li a {
	display: block;
	height: 37px; width: 86px;
	background: transparent url(images/links.png) no-repeat 0 0;
	text-indent:-9009px;
}

ul li#navigation2 a {
	width:110px;
	background-position: -86px 0;
}

ul li#navigation3 a {
	width:123px;
	background-position: -196px 0;
}

ul li#navigation4 a {
	width:97px;
	background-position: -319px 0;
}

ul li#navigation5 a {
	width:108px;
	background-position: -416px 0;
}

ul li#navigation6 a {
	width:100px;
	background-position: -524px 0;
}

ul li#navigation7 a {
	width:176px;
	background-position: -624px 0;
}


ul li a:hover {
	background-position: 0px -37px;
}

ul li#navigation2 a:hover {
	background-position: -86px -37px;
}

ul li#navigation3 a:hover {
	background-position: -196px -37px;
}

ul li#navigation4 a:hover {
	background-position: -319px -37px;
}

ul li#navigation5 a:hover {
	background-position: -416px -37px;
}

ul li#navigation6 a:hover {
	background-position: -524px -37px;
}

ul li#navigation7 a:hover {
	background-position: -624px -37px;
}


#content{
	background: url(images/fauxbg.gif) repeat-y;
	overflow: hidden;
width:800px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height: auto;
background:#FFF;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
}

#content1{
width:493px;
background:#FFF;
font-family: Verdana;
font-size: 13px;
font-weight: normal;
text-decoration: none;
line-height: 17px;
color: #3e0f54;
padding-left: 12px;
float:left;
		
}

#content1 h1 {
	font-family: Verdana;
	font-size: 23px;
	line-height: 28px;
	padding-top: 27px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	color: #f40ce1;
}

#content1 h2 {
	font-family: Verdana;
	font-size: 12px;
	font-weight: normal;
	line-height: 5px;
	color: #0ccbf4;
}


#content1 a {
	font-family: Verdana;
	font-weight: normal;
	color: #0eebd8;
}

#content1 a:visited {
	font-weight: normal;
	color: #87d8bd;
}

#content1 a:hover {
	text-decoration: none;
	color: #3acbeb;
}


#sidebar{
width: 295px;
height: auto;
background:#fff;
font-family: Verdana;
font-size: 13px;
font-weight: normal;
text-decoration: none;
line-height: 17px;
color: #3e0f54;
float: right;
		
}




#content-lyrics{
width:780px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height: auto;
background:#FFF;
margin-left: auto;
margin-right: auto;
padding: 10px 10px 10px 10px;
}

#footer{
clear:both;
width:780px;
border-top: 0px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #f00;
height: auto;
background:#66ccdd;
margin-left: auto;
margin-right: auto;
padding: 10px 10px 10px 10px;
}
johnny0313x is offline   Reply With Quote
Old 7th February 10, 08:56 AM   #2
Josephbm91
WLC Member
 
Join Date: Jan 2010
Location: Texas
Posts: 17
Default Re: Many problems with Many Browsers

I'll walk you through some portions of your invalid code.

Attribute "language" exists, but can not be used for this element.

For javascript, use <script type="text/javascript"> instead of language=.

"required attribute "alt" not specified"
Add alt tags to images. It's an accessibility thing.

"end tag for "img" omitted, but OMITTAG NO was specified"

this means you did not put the trailing slash at the end of a stand alone tag or forgot to close a paired tag. Since it's dealing with your image tag, it means you forgot to put the slash at the end:<img src="" />
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.



To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Josephbm91 is offline   Reply With Quote
Old 7th February 10, 09:11 AM   #3
johnny0313x
WLC Member
 
Join Date: Feb 2010
Posts: 10
Default Re: Many problems with Many Browsers

I guess the trailing slash on the img tag is an HTML 4.0 thing? Cause I never had to do that years ago.
johnny0313x is offline   Reply With Quote
Old 7th February 10, 09:12 AM   #4
Josephbm91
WLC Member
 
Join Date: Jan 2010
Location: Texas
Posts: 17
Default Re: Many problems with Many Browsers

No, it's an XHTML thing.
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.



To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Josephbm91 is offline   Reply With Quote
Old 8th February 10, 06:32 AM   #5
johnny0313x
WLC Member
 
Join Date: Feb 2010
Posts: 10
Default Re: Many problems with Many Browsers

Hey I validated all the html and I hate to say it but I actually really enjoyed doing it, I felt like I learned something and I feel...valid?
Anyways, all the pages had 22 errors left over except lyrics only had 7. Most of the errors are from scripts and I am not sure how to fix those errors, anyone have a clue? are they okay the way they are?
Also here are my browser problems now:
IE7 the first news header shifts up slightly into the main links
Safari 3.2.1 the main links shift to the right
Netscape 8.1.3 The main links shift to right (should I even care about netscape?)
Firefox 3.5.5 on Mac OSX snow leopard - About one pixel shift on footer(not a huge deal)
So I'd say that list is much improved since the validation, can anyone else help me with these issue and let me know which are fixable/most important? Like I'm assuming netscape is so far in the past and since no one really uses it I shouldn' t be as concerned with that? It be nice to have it work in all browsers though.

Last edited by johnny0313x; 8th February 10 at 07:07 AM.
johnny0313x is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:23 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.