Member Avatar for AntonioMontana

So I'm such a poor coder, but I really need help. I think these are really easy to solve if you know what you're doing, and I guess some of you guys here know your way around HTML/CSS. So this is the thing, my site is and when you try opening it in Mozilla Firefox and Internet Explorer, you get different results. This is what I would need: the embedded media player at the bottom should be aligned in the centre like in IE and the text problem is that "250 listeners" falls into the other line when it should all be in one. I really don't know what I'm doing so if someone can fix this for me, I'd be ever grateful.

Link to problems

  • 2 Contributors
  • 4 Replies
  • 118 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Murtan

Dani AI

Generated

Short summary: two separate causes are at play — invalid HTML structure that forces browsers to reflow content differently, and relying on table/align attributes for centering which behaves inconsistently across browsers. correctly flagged the markup problems; fixing those first will make layout fixes reliable.

A robust way to center the embedded player (works in IE, Firefox, Chrome) is to wrap the player in a semantic block and use CSS rather than table align. Example HTML + CSS (replace the object/embed with your player code):

<div class="player-wrap">
  <!-- your embed/object/embed code goes here -->
  <object id="streamPlayer" width="350" height="45"></object>
</div>
.player-wrap { text-align: center; }

/* make the embedded element behave predictably */
.player-wrap object,
.player-wrap embed,
.player-wrap iframe {
  display: inline-block;
  vertical-align: middle;
}

/* alternate: force block centering if needed */
#streamPlayer { display: block; margin: 0 auto; }

To keep the "250 listeners" on one line, avoid placing block elements inside a paragraph. Use inline elements and prevent wrapping with CSS:

<p class="listeners"><span class="count">250</span> listeners <span class="flag">NEW</span></p>
.listeners { white-space: nowrap; }
.listeners .count,
.listeners .flag { display: inline-block; vertical-align: middle; }

Practical debugging checklist:

  • Fix the invalid markup first (no block elements inside <p>, proper <li> structure). Validation matters.
  • Replace deprecated align attributes and table layout with the CSS above.
  • Use browser DevTools (Inspect element -> Computed styles) to see what CSS is applied and whether parent containers override centering.
  • Compare the live HTML/CSS with your local copy (view-source) and clear cache or force-refresh to rule out stale files.

Applying these changes will make the layout consistent across browsers and stop the listener text from wrapping unexpectedly.

Recommended Answers

All 4 Replies

Member Avatar for Murtan

The 'link to problems' you give is to the w3.org validator for the site.

The first error listed is Line 24, Column 21: document type does not allow element "div" here; assuming missing "li" start-tag. The relevant section of your html is here:

<ul>
				<li></li>
					<div id="texto1">****** | home | about | contact | ******</div>
				</ul>

The error says that the div should be 'inside' the li...like this:

<ul>
				<li>
					<div id="texto1">****** | home | about | contact | ******</div>
				</li>
			  </ul>

The indentation and line breaks are not required, but your document seems to be using them. Line 33, Column 29: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag. is complaining about the <div> inside the <p> 

<p>Up to <div id="texto3">250</div> listeners! <div id="texto2">(NEW)</div></p>

I'm not sure what your intent was, but because the div is inside the p, you get the line break. Would a <span> work?

The error list also refers you to an article about embedding flash movies here

Though this doesn't seem to apply directly in this application.

The code to embed the player is at the end of the html. You have the player embedded in a table inside of a div. The table specifies align="center" which appears to center the control in IE, but is not centering it in Firefox. I'm not sure what the problem is, when I removed the <OBJECT> and replaced it with text, it appears to center properly.

You do have an extra set of </td></tr> in the table... it doesn't seem to make any difference with text in there.

Actually, its funny...when I load the page locally, the control centers in Firefox, but not when I access the site.

Member Avatar for AntonioMontana

You see, I totally suck in doing the codes, as I'm a WYSIWYG user. I see it's a piece of cake for you, but you have to know I'm very very thankful, Murtan. Again, thank you! :)

Member Avatar for AntonioMontana

Except I didn't really understand what did you modify the last (embed) code to.. if you could post that part of the code like you did, because I tried removing object and it seems just to go a bit more to the center, but not fully, still looks like it's aligned to left...

(sorry if I'm a pain in the...)

Member Avatar for Murtan

I just pulled the object out...

<div class="clear">
      <!-- begin embedded WindowsMedia file... -->
      <table border='0' cellpadding='0' align="center">

      <tr>
        <td>
	-Player Goes Here-
      </td></tr>
      <!-- ...end embedded WindowsMedia file -->
      </table>
</div>

And it worked when I had Firefox load the local file, I don't have a convenient webserver that I could post it to for testing with an internet link.

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.