FORUMS: list search recent posts

Position text with div, table or tags

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
kennet hayes
Position text with div, table or tags
on Feb 17, 2011 at 12:17:31 am

I having seriuos trouble adding text to webpage. The site is css - divs build in dw cs4.

For adding text im using p- and headingtags inside the divs in the htmlcode. Im making CSS rules for each tag (

etc) and placing them in same style sheet as the divs.
The result when tested in different browsers, is that the text jumps around taking very different positions.

However if i use "CSS Rule Definition" box in DW and apply font-family, font-size etc from there, my text stays at the same place in every browser. But not using heading tags will reduce SEO yes?

Is using a table inside the div a better option? Or making a compound CSS rule like this #div #p?

Im desperate now. Any help or link showing me how to place text on a website will be appreciated.



Return to posts index

Fernando Mol
Re: Position text with div, table or tags
on Feb 17, 2011 at 3:16:56 am

Many times a compound rule is the way to go. Hard to tell you how to organize your rules, cos everyone has his own way.

Understanding inheritance in CSS is the key for this kind of problems.

I hope this helps


Return to posts index

Richard Williams
Re: Position text with div, table or tags
on Feb 17, 2011 at 7:28:32 pm

i think you might find though, the trouble with the Heading tags is they standardise with certain settings.

You can alter the font size of course, but you also need to define padding and margins for the Heading tag. If you add the rule padding 0 and margin 0 then this aught to prevent the moving around you are talking about. (whenever i start a new rule in Dreamweaver i always now, as a standard, put 0 in both of these settings until i get back to those rules and need to define specific settings on the paddings. It saves alot of confusion which i think might be what you are struggling with.

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)


Return to posts index


kennet hayes
Re: Position text with div, table or tags
on Feb 17, 2011 at 8:02:43 pm

Hello Richard and Fernando. Thx for replies. However neither answers solves my problem. Adding "0" to margin and padding just pushes the line of text a bit further up i the div, but the problem remains the same: The line of text shows differently depending which browser i use.

I've tried changing font-size from px to ems or %. No result
Tried removing line-height: 0px; with no result

Heres some code:

#mainwrap {
    background-color: #999;
    height: 670px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    overflow: visible;
    position: relative;
    visibility: visible;
    z-index: 1;
    top: 10px;
}
#header {
    float: left;
    height: 60px;
    width: 950px;
    overflow: hidden;
    position: relative;
    visibility: visible;
    z-index: 2;
    border-top-width: 5px;
    border-top-style: solid;
    background-color: #333;
    border-top-color: #FFF;
}
#logowrap {
    float: left;
    height: 52px;
    width: 240px;
    overflow: hidden;
    position: relative;
    visibility: visible;
    z-index: 3;
    background-color: transparent;
    clip: rect(-4px,auto,auto,auto);
}
#headertxt {
    background-color: #FFF;
    float: left;
    height: 22px;
    width: 710px;
    overflow: hidden;
    position: relative;
    visibility: visible;
    z-index: 3;
    line-height: 0px;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lupatest</title>
<link href="../css/maincss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
h1,h2,h3,h4,h5,h6 {
    font-family: Arial, Helvetica, sans-serif;
}
h1 {
    font-size: 16px;
    color: #333;
}
-->
</style></head>

<body bgcolor="#FF9900">
<div id="mainwrap">
  <div id="header">
      <div id="logowrap"></div>
        <div id="headertxt"><h1 align="center">MATTI HALLES - butik - galleri - værksted - LUPAZONE TLF 22 82 74 66</h1></div>
  </div>
</div>
</body>
</html>


Ive uploaded two screenshots. The correct position in Safari and wrong position in IE




Return to posts index

Richard Williams
Re: Position text with div, table or tags
on Feb 17, 2011 at 8:44:39 pm

paste all the code here please not just a snippet, we cant see whats where the way you did it, but meanwhile take lineheight 0px out as a rule #headertxt

Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o)


Return to posts index

kennet hayes
Re: Position text with div, table or tags
on Feb 17, 2011 at 9:37:09 pm

Hello Richard. The code posted is what causes the problem. The photos illustrates the posted code in firefox and IE. As you can see the line of text h1 changes position depending on browser.

I have tried removing line-height with the result that h1 is ok in IE, but is hardly visible in firefox and safari.
Also ive tried adding "0" to margin and padding with the same result; still different positions depending which browser is used.

When im using the "Rule Definitions" in the div to apply the values for font, fontsize, color etc everything is fine in all browsers. The disadvantage of this is that i cant use p and h1 h2 etc. Thats reduces SEO availability.

I should be able to use the tags and still maintain control over positioning regardless browser choice right?


Return to posts index


kennet hayes
Re: Position text with div, table or tags
on Feb 17, 2011 at 9:52:26 pm

Changing fontsize from pixels to ems or % hasnt solved the positioning issue either. I am getting frustrated..


Return to posts index

Fernando Mol
Re: Position text with div, table or tags
on Feb 17, 2011 at 10:30:11 pm

As Richard says, we need to see it all. Have you uploaded it? Can you share a link?


Return to posts index

kennet hayes
Re: Position text with div, table or tags
on Feb 19, 2011 at 2:49:02 pm

Ive found out what causes the trouble:

When applying the values float:left or float:right to a div, the p- and h tags inside the div jumps out of vertical position!

Very strange. Any ideas?


Return to posts index


kennet hayes
Re: Position text with div, table or tags
on Feb 19, 2011 at 9:11:13 pm

OK i think got it now. Spend all day experimenting with css values to solve the issue. Probably not the only way but works for now. Here goes:

When using a p- or heading css rule wrapped by a div - container with position:relative and float:left/right the text wont stay in place vertically.

To maintain correct position of the text inside the div these two values must be added to the p- or heading rule (along with general values for font-family, font-size etc):
Type: line-height:100%
Block: display:inline


Could look like this:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 100%;
color: #C00;
display: inline;
}


Centering or capitalizing the text can be done by adjusting the values in the div - container that holds the p- or heading rule.
text-align: center;
text-transform: uppercase;


Could look like this:
#lineoftext {
background-color: #CCC;
float: left;
height: 30px;
width: 550px;
overflow: hidden;
position: relative;
visibility: visible;
z-index: 1;
text-align: center;
text-transform: uppercase;
}


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]