Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Why Mozilla Firefox 2 show my page incorrectly (without background)

Status
Not open for further replies.
szmitek

szmitek

Programmer
Aug 14, 2007
2
PL
Why Mozilla Firefox 2 show my page http://szmitek.winweb.pl/ttm/orginal"][/URL] incorrectly (without background under 'Kopieniec Wielki :: 1 / 13'). What should I change so that background under name and number of picture is the same as one under picture and caption ("Kopieniec Wielki (1328 m AMSL). The photo taken on 15/07/2007 13:38 o'clock at about 1280 m AMSL"). Internet Explorer 7 show my page correctly.

Whole XHTML code of page:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
<title>Kopieniec Wielki :: photos from the Tatra Mountains</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="Kamil, Szmit; szmitek; the, Tatra Mountains; photos; photo" name="keywords" />
<link href='../../en/rss.aspx' rel="alternate" title='Kamil Szmit - news' type='application/rss+xml' />
<link href="../../format.css" rel="stylesheet" type="text/css" />
<meta content="document" name="resource-type" />
<meta content="global" name="distribution" />
</head>

<body style="background-color: #333">
<table class="photo" cellspacing="0" cellpadding="0">

<tr>

			<td id="tl"><img alt="Element of border" height="96" src="../assets/clear.gif" width="40" /></td>
			<td id="tm">
				<p class="title">The Tatra Mountains</p>
				<p class="nav">Kopieniec Wielki&nbsp;::&nbsp;1 / 13</p>
			</td>
			<td id="tr">

    <img alt="Element of border" height="96" src="../assets/clear.gif" width="40" /></td>
		</tr>
		
		<tr>
			<td id="left"><img src="../assets/clear.gif" alt='Element of border' width="40" height="1" /></td>
			<td id="maincontent">
				<p class="nav">
					<a
            href='index.aspx?image=0726_152357_p&language='>previous photo</a>&nbsp;::&nbsp;
					<a href="../">

    return
</a>&nbsp;::&nbsp;<a id="language" title="Zmie? j?zyk na polski - change language into Polish" href="index.aspx?language=pl&amp;image=0715_133835_kw">polski</a>&nbsp;::&nbsp;
					<a href='index.aspx?image=0715_144009_pokw&language='>
    next photo
</a>
				</p>
				<p><img id="photo" src="0715_133835_kw.jpg" alt="Kopieniec Wielki" style="border-width:0px;" /></p>
				<p class="photocaption">Kopieniec Wielki (1328 m AMSL). The photo taken on 15/07/2007 13:38 o'clock at about 1280 m AMSL</p>

			</td>
			<td id="right"><img alt="Element of border" height="1" src="../assets/clear.gif" width="40" /></td>
		</tr>
		
		<tr>
			<td id="bl">&nbsp;</td>
			<td id="bm"><p class="credit">Photos taken by means of Siemens S55 mobile phone with Siemens QuickPic IQP-500 camera.</p></td>
			<td id="br">
    &nbsp;</td>

</tr>
</table>
</body>

</html>

Code of part of format.css:

Code: 
...
table.photo {
    font-family: Georgia, "Palatino Linotype", "Times New Roman";
	font-size: 12px;
	text-align: left;
}
#tl {
	background: url('ttm/assets/p-tl.png') no-repeat right top;
	width: 40px;
}
#tm {
	background-image: url(ttm/assets/p-tm.png);
	background-repeat: repeat-x;
}
#tr {
	background: url(ttm/assets/p-tr.png) no-repeat top left;
	width: 40px;
}
#tb {
	background-image: url(ttm/assets/p-b.png);
	background-repeat: inherit;
}
#bl {
	background: url(ttm/assets/p-bl.png) no-repeat top right;
}
#bm {
	background: url(ttm/assets/p-bm.png) repeat-x top right;
	height: 96px;
}
#br {
	background: url(ttm/assets/p-br.png) no-repeat top left;
}
#left {
	background: url(ttm/assets/p-l.png) repeat-y right;
}
#right {
	background: url(ttm/assets/p-r.png) repeat-y left;
}
(...)
.photocaption {
	font-size: 16px;
	color: #fff;
}
.title {
	color: #fff;
	font-size: 30px;
	font-family: Georgia, "Palatino Linotype", "Times New Roman";
}
.comment {
	color: #7B7958;
	font-size: 15px;
	letter-spacing: 0;
}
.credit {
	color: #999;
	font-size: 11px
}
.nav
{
    font-family: Verdana, Arial;
    font-size: 12px;
    color: #ccc;
}
.nav a {
	text-decoration: none;
	color: #ccc;
}
.nav a:hover {
	color: #fff;
	text-decoration: underline;
}
...

Could you help me?
 
Sort by date Sort by votes
Hi

szmitek said:
Why Mozilla Firefox 2 show my page [gray](...)[/gray] incorrectly
Click to expand...
Yes, sure. Standard compliant browsers ( Mozillas, Opera, Safari ) shows the page the same way, only Explorer is different. But no, you do not ask why Explorer render it differently, but why FireFox shows it incorrectly.

Your problem is because the background image in the [tt]table[/tt] cell is to small for that huge [tt]p.title[/tt]. A possible correction is to reduce the [tt]margin[/tt] around the [tt]title[/tt] :
Code: 
[highlight silver] 198 [/highlight].title {
[highlight silver] 199 [/highlight]	color: #fff;
[highlight silver] 200 [/highlight]	font-size: 30px;
[highlight silver] 201 [/highlight]	font-family: Georgia, "Palatino Linotype", "Times New Roman";
[highlight silver] [red]new[/red] [/highlight]    [red]margin: 10px;[/red]
[highlight silver] 202 [/highlight]}
Next time could you please not start with blaming a standard compliant browser ? It may know more about HTML than all members of this forum.

Feherke.
 
Upvote 0 Downvote
Thank you.

I do not blame Mozilla Firefox browser. I check my Web site in Internet Exlorer 7 and Firefox 2 and I told that only one browserf show my page not in the way I want.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
703
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
219
ChrisHirst
ChrisHirst
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
150
Carlvic
Carlvic
craigward
  • Locked
  • Question
Change IIS7 Default landing page
Replies
1
Views
124
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top