Member Avatar for sirlink99

my webpage is not displaying correctly in some of the browsers like firefox, chrome, opera and safari; yet it dispays fine in explorer, avant, maxathon. how could I fix this. the only problem is that the second background doesn't go under all of the text.


here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>Home</title>
<link rel="menu" href="menu.css" type="text/css" />

<style type="text/css">

body 
{
background-image:url('images/backg.jpg');
margin:0px;
padding:0px;
}

.wrapper
{
width:800px;
height:auto;
margin-left:auto;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;

background-image:url('images/tile.jpg');
}

.menu
{ 
height:60px;
width:800px; 
float:left;
}


ul
{
list-style-type:none;
width:500px;
}

li
{
float:left;
text-align:center;
}



a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#33ff33;
padding-top:10px;
padding-bottom:10px;
}


a:hover
{
background-color:#ff6633;
}
a:active
{
background-color:#ff0000;
}

[warning]
{
color:#990000;
}
[thanks]
{
float:right;
}

</style>
</head>

<body>
<div class="wrapper">
<img src="images/banner.jpg"  alt="banner" width="800px" height="150px"/>

<div class="menu"> 
<center>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#plist">Player List</a></li>
<li><a href="#pics">Pictures</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</center>

</div>
<h1 warning="warning">Warning:</h1>
<h2 warning="Warning text">This will be the styx city  website eventually (hopefully)</h2>
<p thanks="Signature">Thanks, 99rock99</p>
</div>


</body>

</html>

thanks for the help

  • 3 Contributors
  • 10 Replies
  • 207 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Arkinder
Member Avatar for Arkinder

“If it works in IE but not Firefox then your markup is wrong. Never, ever use IE as a reference for how things should work. Inept at best, it is 12 years behind all others in modern standards and practices. Never, ever trust IE to do anything right.” - Doc

Regards, Arkinder

Member Avatar for sirlink99

even though the only problem is the center column where there is another background, the background stops 2 lines before the last text. what could be the problem? Also I am trying to fill in a background color CCFFFF (a really light blue) and I want the blue to be partially see through. Is there a way to do that? Also I uploaded the wrong script -_-

anyway the color looks like this

.newsbg{
    width:740px;
    background-color:#CCFFFF
}

and it goes inside

.news
{
    width:800px;
    margin-left:30px;
    margin-right:30px;
}

that is all in the <head> area.

this is what the printing looks like

<div class="news">
    <div class="newsbg">
        <h1 newstitle="test title">Test Title </h1>
        <h4 news="test News">Test News Test News Test News Test News Test News Test News Test News </h4>
    </div>
</div>

is there a way to make the light blue be transparent?

I have decided to upload some images:

this is the good website. Note the tiles cover the "thanks 99rock99" this is also the one where you can see the text in the blue box that I would like transparent.

http://img638.imageshack.us/img638/4996/websitegood.jpg

ths is the one with the tiles not covering the text:

http://img842.imageshack.us/img842/3630/websitebad.jpg


Thanks for your help

Edited by sirlink99 because: n/a
Member Avatar for Arkinder

Okay several things,

warning, thanks, newstitle, and news are not valid HTML attributes. They don't exist, and do nothing in your code.

The center tag is deprecated. To center your navigation add this to your CSS.

.menu {
    margin: 0 auto;
}

It's not appearing because you don't have the code there. One is the file opened from your computer, while the other is from a web page.


Regards, Arkinder

Member Avatar for sirlink99

the background still isn't displaying over the thanks, neither is the blue box, and is there a way to make the light blue translucent?

Member Avatar for Arkinder

The paragraph (thanks) would have to inside of the division with the background color.

<div class="news">
    <div class="newsbg">
        <h1 newstitle="test title">Test Title </h1>
        <h4 news="test News">Test News Test News Test News Test News Test News Test News Test News </h4>
        <p thanks="Signature">Thanks, 99rock99</p>
    </div>
</div>

Yes, have a look at this.


Regards, Arkinder

Edited by Arkinder because: n/a
Member Avatar for sirlink99

the newsbg says that the background color is the light blue, ans technically everything in the

<div class="newsbg">

should have a blue background beneath it.

I am not understanding why it leaves out the last part of the text.

Member Avatar for Arkinder

Ah, sorry I didn't notice this before. You're floating it to the right. When giving an element the float property you're removing it from the normal flow of the page.

You can either not give it the float property, or you can give the newsbg division a set height.

Regards, Arkinder

Member Avatar for sirlink99

Thanks that worked.

Member Avatar for jamesbabooli

Please check your CSS file. You have to check the size of the image and the codings of DIV.
Your issue will definately resolve by editing in CSS file.

Member Avatar for Arkinder

Thank you captain obvious?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.