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" 

"

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
  • 230 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

Quick diagnosis: the center column's background is stopping early because floated elements inside it are taken out of the normal flow, so the parent container collapses and its background doesn't extend under the last lines of content. As observed, this is a float containment issue; older Internet Explorer versions sometimes hid the problem which explains the discrepancy in screenshots posted by .

Concrete fixes (pick one)

  • Modern, robust clearfix (recommended): give the container a tiny "self‑clearing" rule and leave the children floated.

    /* clearfix */
.clearfix::after {
content: "";
display: table;
clear: both;
}

    Add the class to the element that should wrap the floated children (for example, the news container).

  • Simple alternative: force normal flow by giving the container a new block formatting context.

    .newsbg { overflow: auto; /* or: display: flow-root; */ }

    Either approach causes the parent to expand to the height of its floated children so the background covers all text.

Translucent background without affecting text

  • Use an RGBA background so only the background is semi-transparent; children remain fully opaque. Provide a solid-color fallback first, then the RGBA value:
    .newsbg {
background-color: #ccffff;                /* fallback */
background-color: rgba(204,255,255,0.6); /* translucent */
padding: 10px;
}

    Avoid using opacity on the container (it makes text translucent too). For very old browsers that lack RGBA support, use a semi-transparent PNG as a fallback.

Other housekeeping (from the thread)

  • Replace nonstandard attributes like warning or thanks with semantic classes (e.g., class="warning").
  • Drop deprecated tags such as <center> and center via CSS (text-align / inline-block / margin auto approaches).
  • Use numeric width="800" / height="150" in HTML or control sizes in CSS.
  • Validate markup (HTML5 doctype simplifies many legacy issues).

These steps address the float containment and translucency questions raised in the replies and match the practical fixes suggested earlier in the thread.

Recommended Answers

All 10 Replies

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.

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


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.