Strange CSS div problems

Conor

Conor

New Member
Messages
3,570
Reaction score
0
Points
0
www.whosurpaddy.com

I am developing a Toronto version of this site for a client. That Australian version gave us the files and images we need to do it but it seems like they did a halfassed job on the HTML. If you go: http://stmikesgfc.com/wup/ you'll see that not everything is lining up too nicely. I think it's to do with the coding of the divs. Can someone take a look for me?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Who's Ur Paddy, Toronto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="assets/templates/wup/style/general.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="assets/templates/wup/js/swfobject.js"></script>

</head>

<body>
<div id="header" style="background-image: url(assets/templates/wup/images/header_tor.jpg); ">
<div id="login_home" style="background-image: url(assets/templates/wup/images/login_bg_home_tor.jpg); "><span style="font-size:14px; ">Sign In</span>
  <table width="100%"  border="0" cellspacing="0" cellpadding="2">
    <tr>
      <td width="25%">Username</td>
      <td width="75%" class="field"><input name="username" type="text" size="14" /></td>
    </tr>
    <tr>
      <td>Password</td>
      <td class="field"><input name="password" type="text" size="14" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td><img src="assets/templates/wup/images/button_login.gif" alt="" /></td>
    </tr>
  </table>
  <a href="#">Forget Your Password?</a><br>or<br> 
  <img src="assets/templates/wup/images/button_register.gif" alt="" />
</div>
<div id="flash_banner"></div>
  	<script type="text/javascript">
		// <![CDATA[
		var so = new SWFObject("assets/templates/wup/swf/bannerhome.swf", "banner", "325", "200", "8", "");
		so.addParam("scale", "noscale");
		so.addParam("quality", "high");
		so.addParam("menu", "false");
		so.addParam("salign", "t");
		so.write("flash_banner");
		// ]]>
	</script>
</div>


<div id="main">
<div id="flash_nav"></div>

  	<script type="text/javascript">
		// <![CDATA[
		var so = new SWFObject("assets/templates/wup/swf/main_nav.swf", "menu", "310", "463", "8", "");
		so.addVariable("city", 2);
		so.addParam("scale", "noscale");
		so.addParam("quality", "high");
		so.addParam("menu", "false");
		so.addParam("salign", "t");
		so.write("flash_nav");
		// ]]>
	</script>

<div id="dummy"></div>
</div>
</body>
</html>
 
Emihaumut

Emihaumut

New Member
Messages
48
Reaction score
0
Points
0
I took a look at the css file on the site, and none of it seems aligned at all. I suggest you go in and add in the positioning.

However, the site code you provided is aligned with tables, so there's probably an error there. Since I never learned tables, I can't help you too much. Sorry.
 
jensen

jensen

Active Member
Messages
1,168
Reaction score
22
Points
38
In my FireFox2 and IE6 browser, the layout seems just great. but the http://stmikesgfc.com/wup/ site is all jumbled up.

There are a few noticeable problems. The first being the div and the table. The table has been given a 25% and a 75% width. This allows the table to be flexible and to top it off, the table is placed in a div which is flexible too. So because the table stretches the whole width, the background image repeats itself. The image of the man with the moving thumb gets pushed to the next line because the table has taken up the whole width.
 
VPmase

VPmase

New Member
Messages
914
Reaction score
0
Points
0
Add this to your table styles:

Code: 
style="background-image: url(assets/templates/wup/images/header_tor.jpg);background-repeat:no-repeat;background-attachment:scroll;background-position:top left;"

Also, you may want to add this:
Code: 
style="position:absolute;"
to some of the flash divs so they don't move.
 
Last edited:
You must log in or register to reply here.
Top