logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 07-18-2013, 11:19 AM   #1
jude@smither.co.uk
 
Join Date: Jul 2013
Posts: 14
Default Image in cell of table displays differently in Safari and Firefox

I have an image in the header of a page I am creating, and when viewed in Safai (live) it looks fine, but when viewed with Firefox and IE, again live after uploading, there is a small gap at the top and bottom of the image.

It may be to do with the sizing of the image within the cell, but I can't work out what to change.

I have cellpadding and cellspacing both set to zero.
jude@smither.co.uk is offline   Reply With Quote
Old 07-18-2013, 02:55 PM   #2
tux
tux's Avatar
 
Join Date: Feb 2007
Location: Isle of Wight, that little island right at the bottom of the UK
Posts: 657
Default

This is likely to be cross browser compatability issues. IE does not always comply to current standards. Search for IE hacks, you should come across plenty of websites discussing the issue. It can depend on which version of browser you are using. Earlier versions of IE do strange things with height, add margin and padding when it shouldn't etc.

Is there a reason you are using tables and not CSS?
tux is offline   Reply With Quote
Old 07-18-2013, 03:53 PM   #3
jude@smither.co.uk
 
Join Date: Jul 2013
Posts: 14
Default

Not sure how I would achieve this with CSS. I have only just got back into trying to understand code after a few years away from web design, and have managed reasonably well. I thought a table would be a fairly easy way to achieve what I want to achieve.
jude@smither.co.uk is offline   Reply With Quote
Old 07-18-2013, 04:00 PM   #4
tux
tux's Avatar
 
Join Date: Feb 2007
Location: Isle of Wight, that little island right at the bottom of the UK
Posts: 657
Default

Post your code and I will convert it to CSS when I get time. A link to what you have so far would also help.
tux is offline   Reply With Quote
Old 07-18-2013, 05:46 PM   #5
jude@smither.co.uk
 
Join Date: Jul 2013
Posts: 14
Default

Hi

Many thanks. I am using css for some parts.

Code for table is:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75%">
<div class="header"><h1 class="header"><span style="font-family: Geneva;">Rachael Smither</span></h1>
<h2><span style="font-family: Geneva;">Paper Conservator</span></h2>
<br />
</div>
</td>
<td width="25%" align="right"><img src="../images/parchment.jpg" width="281" height="139" alt="Great Parchment Book" title=" London Metropolitan Archives"/>
</td>
</tr>
</table>

and link to web site is:

http://www.smither.co.uk
jude@smither.co.uk is offline   Reply With Quote
Old 07-18-2013, 09:09 PM   #6
d a v e
 
Join Date: Feb 2006
Location: finland
Posts: 1,684
Default

don't layout your site in tables- use the normal document flow and float that image to the right
d a v e is offline   Reply With Quote
Old 07-18-2013, 09:14 PM   #7
tux
tux's Avatar
 
Join Date: Feb 2007
Location: Isle of Wight, that little island right at the bottom of the UK
Posts: 657
Default

Here you go Jude, this should point you in the right direction. I'm no expert and may not have this perfect but you should be able to pick it up if you play around with values and see what it does to the layout.

HTML 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rachael Smither Conservator</title>

<style type="text/css">


body {
	background-color: #B9C4D7;
	font-family: Tahoma, Geneva, sans-serif;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 2em;
	color: #000;
	margin: 0 auto;
	padding: 10px 0 0 10px;
}
h2 {
	font-size: 1.5em;
	color: #B9C4D7;
	margin: 20px 0 0 10px;
	padding: 0;
}
h3 {
	font-size: 1em;
	color: #000;
	margin: 0;
	padding: 0;
}
p{
	font-size: 0.8em;
	color: #000;
	margin: 0;
	padding: 0;
}
ul, li, a{
	list-style-type:none;
	text-decoration: none;
	line-height: 180%;
	color: #000;
}

#container{
	width: 1000px;
	background-color: #fff;
	margin: 0 auto;
	padding: 0;
	}
#header{
	height: 139px;
	background-color: #7B83A8;
	margin: 0 auto 0 auto;
	padding: 0;
}
#header img{
	float: right;
	margin: 0;
	padding: 0;
}
#sidebar1{
	width: 281px;
	float: right;
	background-color: #fff;
	margin: 0;
	padding: 0;
}
#content{
	height: 200px;
	width: 699px;
	float: left;
	background-color: #fff;
	margin: 0;
	padding: 10px;
}
#footer{
	background-color: #7B83A8;
	margin: 0;
	padding: 10px;
}
.clearfloat{clear:both; height:0;}
</style>

</head>

<body>

<div id="container">
    <div id="header"><img src="images/parchment.jpg" width="281" height="139" alt="Great Parchment Book &copy London Metropolitan Archives" title="Great Parchment Book &copy London Metropolitan Archives"/>
       	<h1>Rachael Smither</h1>
    		<h2>Paper Conservator</h2>
               	
    </div><!-- end header -->
    
    <div id="sidebar1">
    	<ul class="nav">
      		<li><a href="index.html">Home</a></li>
      		<li><a href="cv.html">Curriculum Vitae</a></li>
      		<li><a href="projects.html">Projects</a>  </li>
      		<li><a href="contact.html">Contact</a>  </li>
    	</ul>
	</div><!-- end sidebar1 -->
    
	<div id="content">
    	<h3>HOME PAGE</h3>		
	</div><!-- end content -->
  
<br class="clearfloat" />  
  
	<div id="footer">
		<p>&copy Rachael Smither 2013</p><br />
	</div> <!-- end .footer -->

</div><!-- end .container -->

</body>
</html>
Good luck.
tux is offline   Reply With Quote
Old 07-18-2013, 10:07 PM   #8
jude@smither.co.uk
 
Join Date: Jul 2013
Posts: 14
Default

Many thanks.

I'll have a look in the morning. I don't use the wizard, and I have done quite a bit of coding. Just very rusty!
jude@smither.co.uk is offline   Reply With Quote
Old 07-18-2013, 10:10 PM   #9
jude@smither.co.uk
 
Join Date: Jul 2013
Posts: 14
Default

Can the css code go into my existing css file or does it have to sit in the template? If I leave it in the template, will it override any coding in the css file? Sorry to be so ignorant.
jude@smither.co.uk is offline   Reply With Quote
Old 07-18-2013, 10:18 PM   #10
tux
tux's Avatar
 
Join Date: Feb 2007
Location: Isle of Wight, that little island right at the bottom of the UK
Posts: 657
Default

Sorry Jude, that last post was supposed to be for someone else. Have two windows open and posted to the wrong one.

Yes, you can add it to your external style sheet. I just did it like that for example sake.

Your right another day tomorrow. Night.
tux is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:35 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com