PDA

View Full Version : Image in cell of table displays differently in Safari and Firefox


jude@smither.co.uk
07-18-2013, 12:19 PM
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.

tux
07-18-2013, 03:55 PM
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?

jude@smither.co.uk
07-18-2013, 04:53 PM
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.

tux
07-18-2013, 05:00 PM
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.

jude@smither.co.uk
07-18-2013, 06:46 PM
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

d a v e
07-18-2013, 10:09 PM
don't layout your site in tables- use the normal document flow and float that image to the right

tux
07-18-2013, 10:14 PM
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.

<!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.

jude@smither.co.uk
07-18-2013, 11:07 PM
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
07-18-2013, 11:10 PM
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.

tux
07-18-2013, 11:18 PM
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.

jude@smither.co.uk
07-19-2013, 08:14 AM
I think I would like the code to be in a separate file. If I put the css code you have created into a new css file, do I have to change the # to a full stop as in #container

edbr
07-19-2013, 08:19 AM
no # indicates am id which can only ne used once on a page while a ' . ' is used for class which can nave more instances

jude@smither.co.uk
07-19-2013, 08:57 AM
Hi edbr
Many thanks. Just trying to get to grips with it all. If a class has more than one instance, how does the html code on the pages know which class to use? If I put the coding (including the code with the #) into my existing css file without altering the original, will the id entries override the class entries?

tux
07-19-2013, 09:30 AM
No Jude, as Edbr has said, you use an id for a single instance and a class for multiple instances. For example..


#header{
width: 100%;
}
#content{
width: 70%;
}

.redtext{
color: #ff0000;
}

<div id="header">
<p class="redtext"></p>
</div>

<div id="content">
<p class="redtext"></p>
</div>


So the #header and the #content div's will be styled individually and the text in each div use the same class.

You can cut and paste the styling that I gave you into your style sheet. You will probably have to remove redundant styles that you no longer need. Hope this explains it better.

jude@smither.co.uk
07-19-2013, 09:36 AM
Thanks tux.

Off out now, but may get a chance to play this afternoon.

jude@smither.co.uk
07-19-2013, 10:46 PM
I have played around and inserted the code into my css file, but the id="content" code in the template doesn't create an editable area. If I remove the "content" id from the css file, and go back to using class="content" in the template I still don't get an editable area, but this worked before. Any ideas?

tux
07-20-2013, 01:52 PM
Try removing all the Editable Region code and creating a new Editable Region.

I'm not too up on the Dreamweaver functions like templates and library items etc. I hand code so rarely use them!

jude@smither.co.uk
07-20-2013, 03:36 PM
Thanks. I'll have another go. Can you have a class and an id with the same name in the css file?

I agree with self coding I may go back to that. It seemed quite a good idea at the time to use a template making it easier to add new pages, and if the template changes, Dreamweaver will update all files using it. I guess the answer is to get the header, side bars and footer right first time, and just copy and paste the code for new files. It's certainly what I used to do.

tux
07-20-2013, 06:39 PM
Yes having the same name for an I'd and a class is fine.

As for templates, if you plan on going back to hand coding, think about this.

Copy a section of your code and save it as a php file. You can then include it in your pages. You then only have to edit the one file and it will update your whole site just like DW's editable regions.

jude@smither.co.uk
07-20-2013, 08:20 PM
Many thanks. I'll play tomorrow with the code. You have been incredibly helpful thank you so much.

jude@smither.co.uk
07-21-2013, 08:50 AM
Hi tux

I've been looking at how to include a reference to a php file in an html document. If I create php files for the header and footer, in the coding for my pages, would I replace the code:

<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 -->

with:

(square bracket)php(square bracket)
<?
include ('header.php');
?>
(square bracket)/php(square bracket)

and:

<div id="footer">
<p>&copy Rachael Smither 2013</p><br />
</div> <!-- end .footer -->

with:

(square bracket)php(square bracket)
<?
include ('footer.php');
?>
(square bracket)/php(square bracket)

tux
07-21-2013, 09:10 AM
Firstly, to help keep posts clean and easy to read select any code you post and click either the code, html or php button in the editor.

If you are going to go down this route you will have to re save all of your pages as php files. An .html page won't read the php otherwise. Your server/host needs to have php installed too, but 99% of the time they will have anyway.

So, as an example using you header code. Copy and paste your header code into a new file and save it as header.php

Then in the page you want it to appear do this.....

<?php
include('header.php');
?>

You could break this down even further by making an include file for say just the navigation.

So your final page code could end up as simple as....

<?php
include('header.php');
?>

//Your page content here which could potentially have includes too//

<?php
include('footer.php');
?>

jude@smither.co.uk
07-21-2013, 10:33 AM
Hi

Sorry for muddling the post. I'll certainly follow the posting advice!

I will have a go with one of the pages and see what happens.

And again, many thanks.

jude@smither.co.uk
07-24-2013, 02:53 PM
I decide not to go down the php route I think I need to learn more about this method. But have used some of your coding and the pages look as I would like them to look. Thanks.

tux
07-24-2013, 06:36 PM
No problem, glad to help.

edbr
07-25-2013, 02:16 AM
it is possible to include in html pages in html5 also

edbr
07-25-2013, 03:40 AM
<object name="foo" type="text/html" data="incl/header.inc"/> works with html5