Padding problem (firefox/IE)

Millmi · #11 (**permalink**) 08-23-10, 02:09 PM

omigad o_o thanks thanks thaaaanks! :3 hmm.. been using <span> in almost five years now - so haven't thought about it. but okay, time to learn and get better!

And the fixed code looks sooo much better , thanku very much!
I have to think about this in further time ^-^ close all my tags and start learning about div!

Golith · #12 (**permalink**) 08-23-10, 03:35 PM

This is something i would do instead .. i did notice some adjustments that would be required
although the planning allows for adding left or right nav bars and so on to allow for extra <div></div>

HTML Code:

<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<title>Amina SK fotografi</title>

<!--
Add your CSS file in details in here or relative location to the master css file
a {font-family:arial;border-bottom: 0px #ffffff}
a:link{text-decoration: none}
a:hover{font-variant: monospace;border-bottom: 0px solid #ffffff; color: #ffffff!important;font-family: "Arial"} 
-->

</head>

<body background="http://i34.tinypic.com/a2ewyx.png" text="#7B5354">

<!-- sets up the middle are for the master table -->

<!-- commence the master table -->

<table align="center" style="width:900px;margin-top:20px;margin-bottom:20px;background-color:#ffffff;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="805" border="0" cellpadding="0" cellspacing="0" style="margin-top:1px;background-color:#606060;border-bottom:1px solid black">
<tr style="height:47px">
<td width="15">&nbsp;</td>
<td width="500" valign="middle" style="text-align:left">  
<a href=""><img style="margin-top:6px" border="0" src="http://i35.tinypic.com/34eqq1j.png" width="890" height="307" alt="" title="" /></a></td>
</table>
<!-- adding the menu bar -->
<table width="855" border="0" cellpadding="0" cellspacing="0" style="background-color:#000000">
<tr style="height:20px">
<td style="border-left:none" width="50"></td>
<td <a href="index.html"><font color="#ffffff" face="baskerville old face">Hem</font></a></td>
<td <a href="nyheter.html"><font color="#ffffff" face="baskerville old face">Nyheter</font></a></td>
<td <a href="galleri.html"><font color="#ffffff" face="baskerville old face">Galleri</font></a></td>
<td <a href="information.html"><font color="#ffffff" face="baskerville old face">Information</font></a></td>
<td <a href="gastbok.html"><font color="#ffffff" face="baskerville old face">G?stbok</font></a></td>
<td style="border-right:none" width="50"></td>
</tr>
</table>
<div>Horse info</div> (could be used to give a dynamic feel so pages dont continuly reload when you select a different breed
</table>
</body>
</html>

UnrealEd · #13 (**permalink**) 08-24-10, 06:21 AM

In this case I wouldn't use tables, completely obsolete. Millmi only needs 2 or 3 divs to position the entire contents of the site. A table is a little overkill.

Millmi · #14 (**permalink**) 08-24-10, 10:45 AM

good idea x) but think I'm staying with the div :3 al ready using tables at two of the pages in the site (here and here) . but thanks !

uhm, tried the other code, the one you, Golith, did before? x) the areas are still stretching.. don't think it worked. :/ I have it on http://aminask.se/test2.html :3

job0107 · #15 (**permalink**) 08-25-10, 06:18 PM

Try it like this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Amina SK fotografi</title>
<STYLE TYPE="text/css">
.container {
 position:absolute;
 left:137px;
 width: 805px;
}
a {
 font-family:arial;
 border-bottom: 0px #ffffff;
}
a:link {
 text-decoration: none;
}
a:hover {
 font-variant: monospace;
 border-bottom: 0px solid #ffffff;
 color: #ffffff!important;
 font-family: "Arial";
}
.baskerville {
 background-image:url('http://i35.tinypic.com/34eqq1j.png');
 padding-top: 278px;
 padding-bottom: 5px;
 color: #7B5354;
 font-face:'baskerville old face';
 text-align:center;
}
.baskerville2 {
 padding-top: 22px;
 height: 56px;
 background-image:url('http://i37.tinypic.com/e1cjsp.png');
}
.nav {margin-right:100px;}
.bottom_pics {
 background-image:url('http://i37.tinypic.com/1hfd4g.png');
 color: #7B5354;
 text-align:center;
}
</STYLE>
</head>
<body text="#7B5354" background="http://i34.tinypic.com/a2ewyx.png">

<div class="container">
 <div class="baskerville">
  <a class="nav" href="index.html">Hem</a>
  <a class="nav" href="nyheter.html">Nyheter</a>
  <a class="nav" href="galleri.html">Galleri</a>
  <a class="nav" href="information.html">Information</a>
  <a href="gastbok.html">G?stbok</a>
 </div>
 <div class="baskerville baskerville2">A M I N A &nbsp;&nbsp; S K</div>
 <div class="bottom_pics">
  <img src="http://i41.tinypic.com/2cmvoyr.gif" />
  <br />
  <img src="http://i33.tinypic.com/24npoug.png" />
  <br />
  <i><font color="#000000" face="trebuchet ms" size="1">Patriarch från RIKS 2 augusti 2010</font></i>
  <br /><br />
 </div>
</div>

</body>
</html>

Millmi · #16 (**permalink**) 08-26-10, 08:47 AM

Woow!

it worked! and the css and div looks really good! thankuu ! Cx

Golith · #17 (**permalink**) 08-26-10, 09:38 AM

Yep .. I'm glad I'm a newbie at this .. was good to see a professional layout instead of my suggestion. my website is all table based and used it as a template to start this off. Seeing Millmis' suggestion gives me a new lease on a re-write eventually of my own site. just like UNI .. everytime you get a wrong answer means your one step closer to the correct one !!

job0107 · #18 (**permalink**) 08-26-10, 02:44 PM

Thank-you for the complements.
I made a couple more changes to the CSS and HTML.
Fixed font-face to font-family and removed the last <font></font> element.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Amina SK fotografi</title>
<STYLE TYPE="text/css">
body {
 color: #7B5354;
 background-image:url("http://i34.tinypic.com/a2ewyx.png");
}
.container {
 position:absolute;
 left:137px;
 width: 805px;
}
a {font-family:arial;}
a:link {text-decoration: none;}
a:hover {
 font-variant: monospace;
 color: #ffffff!important;
 font-family: "Arial";
}
.baskerville {
 background-image:url('http://i35.tinypic.com/34eqq1j.png');
 padding-top: 278px;
 padding-bottom: 5px;
 color: #7B5354;
 font-family: "baskerville old face";
 text-align: center;
}
.baskerville2 {
 padding-top: 20px;
 height: 56px;
 font-size: 1.5em;
 font-weight: bold;
 background-image:url('http://i37.tinypic.com/e1cjsp.png');
}
.nav {margin-right:100px;}
.bottom_pics {
 background-image:url('http://i37.tinypic.com/1hfd4g.png');
 color: #7B5354;
 text-align: center;
}
.footer_text
{
 font-family: "trebuchet ms";
 font-size: .7em;
 font-style: italic;
 }
</STYLE>
</head>
<body>

<div class="container">
 <div class="baskerville">
  <a class="nav" href="index.html">Hem</a>
  <a class="nav" href="nyheter.html">Nyheter</a>
  <a class="nav" href="galleri.html">Galleri</a>
  <a class="nav" href="information.html">Information</a>
  <a href="gastbok.html">G?stbok</a>
 </div>
 <div class="baskerville baskerville2">A M I N A &nbsp;&nbsp; S K</div>
 <div class="bottom_pics">
  <img src="http://i41.tinypic.com/2cmvoyr.gif" />
  <br />
  <img src="http://i33.tinypic.com/24npoug.png" />
  <br />
  <span class="footer_text">Patriarch från RIKS 2 augusti 2010</span>
  <br /><br />
 </div>
</div>

</body>
</html>

Millmi · #19 (**permalink**) 08-29-10, 04:55 AM

aaw

now i don't need to insert the fonts everytime. thaanks!