Member Avatar for iball

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

  • 3 Contributors
  • 6 Replies
  • 139 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Good catch by - a single malformed CSS declaration can make browsers handle the rest of the stylesheet differently, and Firefox will often expose stricter parsing behavior. Use DevTools to inspect computed styles and check the stylesheet for syntax errors. The W3C note on CSS parsing explains how invalid declarations are handled: CSS parsing rules.

If the bug recurs, check a few other common causes of unexpected vertical gaps: the browser default body margin, margin collapsing between a parent and its first child, and images aligned to the text baseline. Useful quick checks you can try (one at a time): body{margin:0;padding:0}, img{display:block} or img{vertical-align:top}, or give the wrapper padding-top:1px or overflow:auto to prevent margin collapse. See the W3C discussion of collapsing margins here: collapsing margins.

About custom scrollbars (your follow-up) - native support is inconsistent across engines. WebKit/Blink accept ::-webkit-scrollbar pseudo-elements; Firefox supports scrollbar-width and scrollbar-color. MDN documents both: ::-webkit-scrollbar and scrollbar-width. For a consistent, cross-browser appearance consider a lightweight JS/CSS library (SimpleBar, OverlayScrollbars), but prioritize accessibility: keep keyboard scrolling, visible focus states, and a usable native fallback.

Also follow 's standards-based advice: drop deprecated attributes, prefer CSS-based/responsive sizing, avoid absolute positioning where unnecessary, and reproduce the issue in a minimal test case before applying site-wide fixes.

Recommended Answers

All 6 Replies

Member Avatar for macneato

Hi Iball,

Not sure how the site is suppose to look, since I don't have any screen or link (kinda need the images to load).

But did notice your overflow tag isn't closed. So it might be causing the problem. If not, send me a screen and I will investigate the problem.

Cheers

Member Avatar for iball

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?

Member Avatar for MidiMagic

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.

Member Avatar for iball

Well it is because the site is part of a template.

(Solved)

Member Avatar for macneato

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

Member Avatar for MidiMagic

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.