Have something to say? Contribute New Article Reply to this Article
White Space in FF not IE
Haha well thay isn't a typo. While going through my problem i find a lot of cases where IE is the meanie. Well for me, FF is the bully.
I been coding this site for quite a while but i have a huge problem. There is a whitespace between the top and the text area. In IE it looks great but in FF the whitespace exists.
Here is the HTML
<html><!-- InstanceBegin template="/Templates/bse6.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>trty</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #76CE76;
}
-->
</style>
<link href="bb.css" rel="stylesheet" type="text/css">
<link href="egwes.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" -->
<link href="eqwes.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {
font-size: 24px
}
-->
</style>
<!-- InstanceEndEditable -->
<link href="eqwes.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (trty) -->
<div id="site_layout">
<table width="800" height="601" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#76CE76" id="Table_01">
<tr>
<td colspan="8"><img src="images/bse6_01.gif" width="800" height="200" alt=""></td>
</tr>
<tr bgcolor="#76CE76">
<td rowspan="3"><img src="bse2/images/bse6_02.gif" width="76" height="400" alt=""></td>
<td colspan="2">
<a href="index.html"><img src="bse2/images/bse6_03.gif" alt="" width="88" height="64" border="0"></a></td>
<td>
<a href="history.html"><img src="bse2/images/bse6_04.gif" alt="" width="91" height="64" border="0"></a></td>
<td>
<a href="contact.html"><img src="bse2/images/bse6_05.gif" alt="" width="83" height="64" border="0"></a></td>
<td>
<a href="forum.html"><img src="bse2/images/bse6_06.gif" alt="" width="107" height="64" border="0"></a></td>
<td>
<img src="bse2/images/bse6_07.gif" width="233" height="64" alt=""></td>
<td rowspan="3"><img src="bse2/images/bse6_08.gif" width="122" height="400" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="bse2/images/bse6_09.gif" width="14" height="336" alt=""></td>
<td colspan="5"><!-- InstanceBeginEditable name="EditRegion3" -->
<div id="site_content">
<p align="center" class="style1">Welcome to Community Skill Exchange</p>
<p>Community Skill Exchange is a link that enables people to exchange skills, knowledge and talents without having to pay tuition, adhere to a formal schedule or make a long-term commitment. The only catch is that in order to learn, you have to teach something of your own! </p>
<p><a name="m0wj18"></a>The Skill Exchange accommodates a wide range of talents and interests, from vegetarian cooking to Iyengar yoga, from classical guitar to Chinese language, from website design to tennis. Partnerships are created at the message board, where people can post the skills they have to offer and search for the ones they want to learn. The more people, the more skills, the larger base of knowledge from which we can exchange our talents and abilities. </p>
</div>
<!-- InstanceEndEditable --></td>
</tr>
<tr>
<td colspan="5"><img src="bse2/images/bse6_11.gif" width="588" height="79" alt=""></td>
</tr>
<tr>
<td>
<img src="bse2/images/spacer.gif" width="76" height="1" alt=""></td>
<td>
<img src="bse2/images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<img src="bse2/images/spacer.gif" width="74" height="1" alt=""></td>
<td>
<img src="bse2/images/spacer.gif" width="91" height="1" alt=""></td>
<td>
<img src="bse2/images/spacer.gif" width="83" height="1" alt=""></td>
<td>
<img src="bse2/images/spacer.gif" width="107" height="1" alt=""></td>
<td>
<img src="bse2/images/spacer.gif" width="233" height="1" alt=""></td>
<td>
<img src="bse2/images/spacer.gif" width="122" height="1" alt=""></td>
</tr>
</table>
</div>
<!-- End ImageReady Slices -->
</body>
<!-- InstanceEnd --></html>
The CSS:
bb.css:
#site_layout {
background-color: #76CE76;
height: 100%;
width: 100%;}
eqwes.css:
#site_content {
background-color: #FFFFFF;
height: 257px;
width: 588px;
font-size: 14px;
overflow:scroll
white-space: pre;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
white-space: normal;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
}Please Help
Lay and behold that solved it. I never noticed i didn't close it.
Now my next question is..if i want to make my own scrollbar..I mean one that looks really different, how could i make it and put it in so it would work?
What are you doing with the comment tags????
The use of <!-- --> tags to hide code from the browser is very iffy now. The standard has changed, and browsers are changing to match, one at a time.
Any trick that works now will be very short-lived, as more browsers make the changes. Use comments only to enclose comments.
MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
Midi is correct though about your comments. Nevertheless, about styling your scrollbars, you will need CSS to accomplish it, below is a link that should give you all the info you need.
Click here
Please mark the thread as solved and all the best
Defining widths and heights in pixels makes the site incompatible with many screen resolutions. Use CSS to define sizes as percentages or points.
Also, don't put size styles (width, height) and surrounding styles (margin, border, padding) in the same tag. That guarantees an IE/FF incompatibility, because IE doesn't obey the standard order of rendering.
IE crams the surrounding styles inside the defined size. The standard places them outside the defined size.
Don't use absolute positioning.
MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
This article has been dead for over three months
You
© 2012 DaniWeb® LLC
