HELP!!! Cross browser issue...

This is a discussion on "HELP!!! Cross browser issue..." within the Web Page Design section. This forum, and the thread "HELP!!! Cross browser issue... are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Nov 30th, 2006, 14:53
hak hak is offline
New Member
Join Date: Nov 2006
Location: Dogville
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Unhappy HELP!!! Cross browser issue...

Here is the link to the project I am working on for a local zine.... sixtysecondape

I'm sure some of the more advanced coders here could pick apart a thousand things wrong with my code... I am still in the process of plugging everything in. I am more of a graphic and print guy anyways.

The issues I am having are:

1. There is a slight seperation of the banner from the top table wich leaves a line. It looks fine in Firefox but IE screws it up.

2. The left table wich is seperated into 4 tables on the left side, verses the 3 on the right was done to allow the graphics to bleed over the edge. Again in firefox it looks fine, but IE repeats the image from the table above it... regardless of the fact I wrote it into the css.

I assume both problems have to do with a minor inconsistacy in my code somewhere... I am just trying to get some new eyes to look at it objectively and perhaps give me some advice.

Thanks in advance!
Hak

Last edited by hak; Nov 30th, 2006 at 15:01. Reason: mistake
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Nov 30th, 2006, 14:58
hak hak is offline
New Member
Join Date: Nov 2006
Location: Dogville
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Re: HELP!!! Cross browser issue...

here is the source code...
Quote:
<style type="text/css">
<!--
{
background-color: #ffffff;
}
.topbg
{
background-image:url(images/top.jpg);
background-repeat:repeat-x;
height:24px;
}
.leftbg2
{
background-image:url(images/left_mid1.jpg);
background-repeat:repeat-y;
width:31px;
}
.leftbg
{
background-image:url(images/left_mid_main.gif);
background-repeat:repeat-y;
width:31px;
}
.rightbg
{
background-image:url(images/right_mid.gif);
background-repeat:repeat-y;
width:32px;
}
.bottombg
{
background-image:url(images/bottom.gif);
background-repeat:repeat-x;
height:24px;
}
.mainimage
{
background-image:url();
background-repeat:no-repeat;
width:231px;
height:174px;
}
.menubox
{
border-bottom:1px solid #ffffff;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
height:18px;
background-color:#ffffff;
}
.menutext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: 18px;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
}
.menutext:hover
{
color:#797777;
}
.newsbox
{
border:1px solid #ffffff;
padding:1px;
background-color:#ffffff;
}
.search_inputbox
{
border:1px solid #000000;
background-color:#e1dcd6;
width:110px;
height:19px;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
padding-left:4px;
line-height:19px;
vertical-align:middle;
}
td {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 14px;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
}
.td {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: 14px;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
}
.td:hover
{
text-decoration:underline;
color:#797777;
}
.bodytext
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FA0505;
text-decoration:none;
font-weight:bold;
line-height:18px;
}
.footertext
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#EBFDE8;
text-decoration:none;
font-weight:bold;
line-height:18px;
}
.footertext:hover
{
text-decoration:underline;
}
.redtext:hover
{
text-decoration:underline;
}
.whitespace
{
white-spacere;
}
body {
background-color: #3b3030;
}
.style7 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #000000;
}
.style8 {
color: #000000;
font-size: 12px;
}
body,td,th {
color: #000000;
}
-->
</style>
</head><body onload="MM_preloadImages('images/home1.gif','images/about2.gif','images/forum2.gif','images/contact2.gif','images/links2.gif')">
<form id="form1" name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#79D16B">
<tr>
<td bgcolor="#3b3030"><table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><table width="815" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="31" align="left" valign="top"><img src="images/top_left.jpg" width="57" height="135" /></td>
<td width="739" align="left" valign="top" class="topbg">&nbsp;</td>
<td width="45" align="left" valign="top"><img src="images/right_top_corner.gif" width="40" height="135" /></td>
</tr>
<tr>
<td height="154" align="left" valign="top" class="leftbg2">&nbsp;</td>
<td rowspan="2" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" bgcolor="#ffffff" style="padding:0px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding-bottom:0px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" bgcolor="#ffffff"></td>
</tr>
<tr> </tr>
<tr>
<td align="left" valign="top" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0"><img src="images/ban.jpg" width="731" height="154" /></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#ffffff"><img src="images/spacer.gif" alt="" width="0" height="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="147" height="357" align="left" valign="top" bgcolor="#ffffff" class="newsbox"><table width="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="padding:13px;"><table width="89%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="padding-top:10px; padding-bottom:10px;"><table width="0" border="0" cellspacing="0" cellpadding="0">
<tr>
... (pt. 1)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Nov 30th, 2006, 14:59
hak hak is offline
New Member
Join Date: Nov 2006
Location: Dogville
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Re: HELP!!! Cross browser issue...

pt. 2...
Quote:
<td width="98"><img src="images/top_nav.gif" width="111" height="45" /></td>
</tr>
<tr>
<td><a href="home.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/home2.gif',1)"><img src="images/home1.gif" name="Image21" width="111" height="29" border="0" id="Image21" /></a></td>
</tr>
<tr>
<td><a href="about.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','images/about2.gif',1)"><img src="images/about1.gif" name="Image23" width="111" height="28" border="0" id="Image23" /></a></td>
</tr>
<tr>
<td><a href="forum/index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','images/forum2.gif',1)"><img src="images/forum1.gif" name="Image24" width="111" height="29" border="0" id="Image24" /></a></td>
</tr>
<tr>
<td><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','images/contact2.gif',1)"><img src="images/contact1.gif" name="Image25" width="111" height="29" border="0" id="Image25" /></a></td>
</tr>
<tr>
<td><a href="links.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','images/links2.gif',1)"><img src="images/links1.gif" name="Image22" width="111" height="41" border="0" id="Image22" /></a></td>
</tr>
</table> </td>
</tr>

<tr>
<td height="2" align="left" valign="top" bgcolor="#ffffff"><img src="../Florist/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>

</table></td>
</tr>
<tr>
<td style="border-bottom:1px solid #ffffff;" bgcolor="#ffffff"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td height="67" bgcolor="#ffffff" style="padding:7px;"><table width="130" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="18" colspan="2" align="left" valign="top"><div align="center"><img src="images/newsletter.jpg" width="107" height="31" />
<br />
</div></td>
</tr>
<tr>
<td width="102" align="left" valign="top">
<label>
<input name="textfield" type="text" class="search_inputbox" value=" Enter E-Mail Here" />
</label></td>
<td width="28" align="left" valign="left"><img src="images/arrow.gif" width="23" height="17" /></td>
</tr>
</table></td>
</tr>
</table> </td>
<td width="578" align="left" valign="top" bgcolor="#ffffff" style="padding-left:0px; padding-right:0px;"><table width="547" height="395" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10" height="51"><img src="images/left_top_corner_blog.gif" width="79" height="87" /></td>
<td width="496"><img src="images/top_blog.gif" width="453" height="87" /></td>
<td width="27"><img src="images/right_top_corner_blog.gif" width="75" height="87" /></td>
</tr>
<tr>
<td height="201" rowspan="4" background="images/left_mid_blog.gif">&nbsp;</td>
<td height="47" bgcolor="#E1DCD6"></td>
<td rowspan="4" background="images/right_mid_blog.gif">&nbsp;</td>
</tr>
<tr>
<td height="75" bgcolor="#E1DCD6">&nbsp;</td>
</tr>
<tr>
<td height="71" bgcolor="#E1DCD6">&nbsp;</td>
</tr>
<tr>
<td height="67" bgcolor="#E1DCD6"><p>&nbsp;</p>
<p>&nbsp;</p></td>
</tr>
<tr>
<td height="52"><img src="images/left_bottom_corner_blog.gif" width="79" height="88" /></td>
<td background="images/bottom_blog.gif">&nbsp;</td>
<td><img src="images/right_bottom_corner_blog.gif" width="75" height="88" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" bgcolor="#ffffff"><img src="../Florist/images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td height="35" align="left" valign="middle" bgcolor="#ffffff"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="201" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" class= "footertext">&copy; Earth Blooms 2006</td>
</tr>
</table></td>
<td align="left" valign="top"><table width="78%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" bgcolor="#ffffff" class="whitespace"><a href="../Florist/index.html" class="footertext">Home |</a> <a href="../Florist/about.html" class="footertext">Services |</a> <a href="../Florist/about.html" class="footertext">Forum |</a> <a href="../Florist/contact.html" class="footertext">About |</a> <a href="../Florist/contact.html" class="footertext">Contact</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td rowspan="2" align="left" valign="top" class="rightbg">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top" class="leftbg">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/left_bottom_corner.gif" width="57" height="64" /></td>
<td align="left" valign="top" class="bottombg">&nbsp;</td>
<td align="left" valign="top"><img src="images/right_corner_bottom.gif" width="40" height="64" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Dec 1st, 2006, 08:52
drd drd is offline
Up'n'Coming Member
Join Date: Dec 2005
Location: Hampshire, England, UK
Age: 28
Posts: 89
Thanks: 1
Thanked 1 Time in 1 Post
Re: HELP!!! Cross browser issue...

Nice graphics.

Why not just have the whole graphic at the top as one image in one td.

Trouble is, that's soooo much code I don't really have time to look through it all and work out whats going on. Would be great to use CSS, but if thats not an option then I'd settle for a simpler layout.

You can try adding * {margin: 0; padding: 0} to your css to try and get rid of unwanted margin and padding but it could be a different issue.

Last edited by drd; Dec 1st, 2006 at 14:05.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Dec 1st, 2006, 12:31
Up'n'Coming Member
Join Date: Nov 2006
Location: Ipswich
Posts: 58
Thanks: 0
Thanked 0 Times in 0 Posts
Re: HELP!!! Cross browser issue...

I'm no expert but I've had many a problem using padding and margins in CSS. Firefox displays them in a different way to IE. You're using a table layout though, whereas I use divs, so I'm not sure if this is applicable in your case.

If you know how to do it, the best way of getting round it is to have a firefox stylesheet and an IE stylesheet. You sniff out the browser using PHP and apply the correct stylesheet using the if statement. Or just steer the hell away from using padding and margins!
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Dec 1st, 2006, 20:00
hak hak is offline
New Member
Join Date: Nov 2006
Location: Dogville
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Re: HELP!!! Cross browser issue...

Quote:
Originally Posted by drd View Post
Nice graphics.

Why not just have the whole graphic at the top as one image in one td.

Trouble is, that's soooo much code I don't really have time to look through it all and work out whats going on. Would be great to use CSS, but if thats not an option then I'd settle for a simpler layout.

You can try adding * {margin: 0; padding: 0} to your css to try and get rid of unwanted margin and padding but it could be a different issue.
Yeah, div's would be way better. The thing is, I'm going to embed a blog into all the pages so I can do updates while I'm on the road. The current architecture allows me to fill the body with as much content as I want (that sounds creepy), and the nav always stays in the same place. As you know that kind of stuff can be very tricky.

This is going to be a political magazine to raise awareness about the war and what these Chickenhawaks have been doing to our country... with some hot chicks, fat kicks and music reviews thrown in for good mesure. I just got the forums up last night... back to the grind... ugh.

Thanks everyone for the feedback, I sincerely appreciate your time. Please feel free to continue to critique how wack it is, I don't mind at all.

Last edited by hak; Dec 1st, 2006 at 20:55.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Dec 2nd, 2006, 06:20
hak hak is offline
New Member
Join Date: Nov 2006
Location: Dogville
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Re: HELP!!! Cross browser issue...

Quote:
Originally Posted by drd View Post
Nice graphics.

Why not just have the whole graphic at the top as one image in one td.

Trouble is, that's soooo much code I don't really have time to look through it all and work out whats going on. Would be great to use CSS, but if thats not an option then I'd settle for a simpler layout.

You can try adding * {margin: 0; padding: 0} to your css to try and get rid of unwanted margin and padding but it could be a different issue.
Success!!! Thanks.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Dec 4th, 2006, 12:40
Elite Veteran
Join Date: Aug 2005
Location: That Place
Posts: 2,044
Blog Entries: 1
Thanks: 0
Thanked 37 Times in 37 Posts
Re: HELP!!! Cross browser issue...

hehe I used to live in Deep Ellum! Ahh I still go there all the time though. Truth is the crime reports are mostly bogus as DE is prime real estate and some would like nothing more than to turn it into nothing but condo's and town houses. Bastards. I disagree with the drink prices and still plenty of great food down there i.e. Angry Dog, St Petes etc.. and Adairs still has $7 pitchers although the beer is a bit soapy heh. And where else woudl you have such lovely places like Bar of Soap where you can have a $1.50 draft, play pinball and do your laundry in the same place? love it! I used to live/work in DE and I wish I still did. Closes thing to NY texas has. Although Addision is fun, Black Finn, Duke's, The Londoner.. All good all good.

</rant>
__________________

Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)

Last edited by moojoo; Dec 4th, 2006 at 12:45.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Tags
help

Thread Tools

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
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Cross-Browser difficulties... Dapandyman Web Page Design 6 Dec 9th, 2006 21:53
Help! Cross Browser Issue centenial Web Page Design 1 Aug 8th, 2006 18:56
New Cross-Browser Low masonbarge JavaScript Forum 2 May 11th, 2006 17:18
Cross Browser jwalker80 Web Page Design 10 Dec 22nd, 2005 15:38
Cross-browser XML parsing??? gohankid77 Other Programming Languages 4 Mar 28th, 2005 17:39


All times are GMT. The time now is 14:29.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved