Showing CSS Text On Left Corner In Browsers

Hi,

We are developing http://www.1tm.com and our DIV/CSS text is showing duplicate on the left top hand side in Safari (Really shows) IE, Chromo (For a second) and Opera. Works fine in FireFox :slight_smile:

This DIV/CSS text is only suppose to show in our faded slide show.

Thank you for any help!

The panel div here needs position to contain its absolutely positioned content.

<div class="panel" width="696">

Change to:

<div class="panel" style="width:696px; position:relative">

You have many semantic errors in your code, but as it is a table layout. :wink:

You should also give the page a min-width I think, so the menu bar doesn’t disappear to the left in a narrow viewport. (Or use another centre method.)

Great work!

One last problem the text in the faded slide show shows up a little high in IE. How would we fix this so it works like FireFox?

Thanks Erik

Hi. I remember you converting your website from tables to CSS some weeks ago, but apparently you went back to tables? When you insist in using tables don’t mix it up to much with CSS! This makes the appearance very unpredictable.

Coming back to to your question! In which browser is it that the text is showing up higher?

I can’t help with any other checking than view source in FF in the system I’m on for the time.

Sorry, someone else maybe. :slight_smile:

Edit )
Wish came true as donboe! :slight_smile:

IE and Opera its show a little higher.

Thanks!

In div #photos I see


margin: 0pt;

Shouldn’t that be:


margin: 0px;

Sorry where exactly is that line, cant seem to find it.

Thanks


<div id="photos" class="galleryview" style="visibility: visible; position: relative; margin: 0pt; background: none repeat scroll 0% 0% black; border: medium none; width: 696px; height: 220px;">

But again, you realy should do something about the markup! You not only mix CSS with tables you have inline styles on top of that as well! This is asking for problems

It’s probably because you utilised the default top margin of the h2 to push the heading into position. IE<8 doesn’t apply top margins by default.

You need to control the margins (and padding) on all the elements you use.


h2 {
    font-size: 200%;
    font-weight: 400;
    [B]margin: 1em 0 0;[/B]


}



It put it in place but now its cutting off some of the text in IE, but every other browser it works great. Any suggestions?

Thanks

Just to warn you, I’m NOT going to sugarcoat this. Your problems run right to the bone of this, and it does you NO good to have people suggest silver bullet fixes for something so fundamentally flawed. That’s not helping you get this better.

Now… mein gott that layout breaks horribly on large font/120dpi systems (like mine!) – here’s a tip, fixed width and worse, fixed height are the road to /FAIL/. In general this layout is riddled with problems top to bottom and has major coding issues.

Some advice:

  1. clean up your FIFTY FIVE validation errors, and get rid of the BOM.
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.1tm.com%2F&charset=(detect+automatically)&doctype=Inline&group=0

  2. This is a NEW website, right? then why is it a Tranny? Transitional is for supporting old/outdated/half-assed coding techniques, NOT for building new sites.

  3. ease up on the javascript – there is NOTHING on that page which should warrant more than 4k of .js, and yet you’ve got this giant steaming train wreck of jquery trash in there. That’s 134k for NOTHING! The scripting on it’s own is almost the upper limit I would ever allow for an entire PAGE on a website!

  4. Get all that presentation out of your markup – that’s what EXTERNAL CSS is for – likewise PROPERLY coded MODERN websites have ZERO business using imagemaps, the IMG tag for presentational images like “background_40.gif”, single TD tables, endless nested tables for nothing on a non-columnar layout, deprecated attributes like ALIGN, VALIGN, BORDER, and likewise tags like CENTER and FONT have ZERO business being used on a website after around 2001. (when we finally kicked nyetscape 4 to the curb)

  5. where IMG tags are warranted (like those card gif’s) it’s called ALT text – use it!

Bottom line, you’ve got 25k of markup to deliver 3k of plaintext, a 9:1 code to content ratio – you’ve got SO much presentational garbage inlined it begs the question just what the devil does it even NEED 10k of CSS for, and with over half a megabyte total it is eight times what I consider the ideal size for a single page on a site, and four times the upper limit I’d ever allow.

It needs to be thrown away and started over clean using modern semantic markup, separation of presentation from content, and an overall reduction in page size of at LEAST 75%!

Seriously, this:


</div>

<div style="margin-top:125px; background-color:#EAEAEA; background-repeat:repeat-x">
	
		<tr>
		<td style="height:40; background-color:#EAEAEA; background-repeat:repeat-x; background-attachment:scroll; vertical-align:middle; background-position-y:50%">
			<div align="center">
			<table style="background-position: top right; width:766; border-collapse:collapse; background-color:transparent; background-repeat:no-repeat; background-attachment:scroll" bordercolor="#111111" cellpadding="0" cellspacing="0">
				<tr>
				<td style=" background-position: left; background-color:transparent; background-repeat:repeat-y; background-attachment:scroll" width="570">
					<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; height:10" bordercolor="#111111" width="100%" height="50%">
											<tr>
												<td width="520" style="vertical-align: bottom" height="95%" align="right">
												<table border="0" cellpadding="0" cellspacing="0" style="vertical-align: middle; border-collapse: collapse; height:0" bordercolor="#111111" width="100%">
													<tr>
														<td style="vertical-align: middle" align="center">
																							
</td></tr>
													<tr>
														<td style="vertical-align: middle" align="center">
														&nbsp;</td></tr>
													<tr>
														<td style="vertical-align: middle" align="center">
														<div align="right">
														<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="50">
															<tr>
																<td align="right">
																<p align="center"><div id="photos" class="galleryview">
<div class="panel" style="width:696px; position:relative">

Is WHY it needs to be thrown away.

If that was directed at me then I already have a disclaimer as I already went into this issue in detail in the OPs previous post with [URL=“http://www.sitepoint.com/forums/showpost.php?p=4757711&postcount=2”]my reply. :slight_smile: I don’t think I could have said it clearer than that.