Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS - Class positioning problem

Status
Not open for further replies.
BobTB

BobTB

Technical User
Oct 28, 2002
37
AU
I have created a web page in dreamweaver mx and also an external .css file. I have created a standard text class for a main heading. It works ok but the problem is that when the heading displays in Netscape 7.0 the is always a gap or space above the text heading. In Internet Explorer 6 it shows correctly at the very top of the table. Why does the css class place an area or line of space before each text heading?

Thanks.

P.S. This is causing also causing a real headache with some auto scroll div containers. They are positioned correctly but the text headings are displaying in netscape with the annoying line of space above each one.
 
Sort by date Sort by votes
can you post the link
it sounds more like either a mrgin setting or a table issue
NN and IE interprute tables in a different way so a slight error in the layout may not be noticed in IE but will be noticed in NN
same goes for the margin setting's ---------------------------------------
{ str = "sleep is good for you. sleep gives you the energy you need to function";
ptr = /sleep/gi;Nstr = str.replace(ptr,"coffee");alert(Nstr); }
---------------------------------------
for the best results to your questions: FAQ333-2924

 
Upvote 0 Downvote
Try the code below in both IE ans NS7 browsers and you will see there is a space or blank line above the first line of text.


<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<style type=&quot;text/css&quot;>
<!--
.Blue16B {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #0000FF;
}
.Black11 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
}
-->
</style>

</head>

<body leftmargin=&quot;0&quot; topmargin=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;>
<table width=&quot;250&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;3&quot; cellspacing=&quot;3&quot;>
<tr>
<td>
<div id=&quot;Layer1&quot; style=&quot;position:absolute; width:200px; height:115px; z-index:1; left: 367px; top: 12px;&quot;>

<p class=&quot;Blue16B&quot;>Sample Text</p>
<p class=&quot;Black11&quot;>This is some more text..........</p>
</div>
</div></td>
</tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
I have posted the sample code but no-one has provided an possible answer..........can someone please help???
 
Upvote 0 Downvote
try changing your DIV's to LAYER's ---------------------------------------
{ str = &quot;sleep is good for you. sleep gives you the energy you need to function&quot;;
ptr = /sleep/gi;Nstr = str.replace(ptr,&quot;coffee&quot;);alert(Nstr); }
---------------------------------------
for the best results to your questions: FAQ333-2924

 
Upvote 0 Downvote
Do you just have to change the <div> tags to <layer> tags?
 
Upvote 0 Downvote
yup!

---------------------------------------
{ str = &quot;sleep is good for you. sleep gives you the energy you need to function&quot;;
ptr = /sleep/gi;Nstr = str.replace(ptr,&quot;coffee&quot;);alert(Nstr); }
---------------------------------------
for the best results to your questions: FAQ333-2924

 
Upvote 0 Downvote
onpnt.............tried that and it still has the line space above the heading in Netscape 7.............is there anything else I can try?
 
Upvote 0 Downvote
you could get rid of the DIV. IE and NN treat the positioning of elements differently, so if you want a sound structured content that is going to act the same browser to browser do
<body leftmargin=&quot;0&quot; topmargin=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;>
<table width=&quot;250&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;3&quot;>
<tr>
<td>
<p class=&quot;Blue16B&quot;>Sample Text</p>
<p class=&quot;Black11&quot;>This is some more text..........</p>

</td>
</tr>
</table> ---------------------------------------
{ str = &quot;sleep is good for you. sleep gives you the energy you need to function&quot;;
ptr = /sleep/gi;Nstr = str.replace(ptr,&quot;coffee&quot;);alert(Nstr); }
---------------------------------------
for the best results to your questions: FAQ333-2924

 
Upvote 0 Downvote
otherwise taking out the cellpadding is the best I could fit it.

you can also do some conditioning with javascript onLoad to check for browser type and the position the DIV

if you try adding -10 to the top attrib you will see how NN positions it as IE does. however you go off the screen then in IE. so check for the browser name and set the postion on that condition

Liek I said before though. I don't like to use DIV's etc.. to position things that are going to be that critical in the layout of the page as browsers will treat them differently ---------------------------------------
{ str = &quot;sleep is good for you. sleep gives you the energy you need to function&quot;;
ptr = /sleep/gi;Nstr = str.replace(ptr,&quot;coffee&quot;);alert(Nstr); }
---------------------------------------
for the best results to your questions: FAQ333-2924

 
Upvote 0 Downvote
How would I make this table auto scroll then. Do I place a width, height and overflow elements into the css script?
 
Upvote 0 Downvote
Does anyone have anymore suggestions regarding this positioning problem.........nothing has worked so far......the div's need to be auto scrolling, so that means that I cant use tables only.

Thanks
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
750
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
600
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
638
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
205
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top