CSS - W3 Discourages Empty <p>s. Should I Put <p Title="something">text</p> Instead?

(I originally posted this at the end of another of my topics but I don't think it was seen).

I have just noticed this problem in firefox (may happen in other browsers) but I couldnt make it happen in IE6. After the first load of the page or after a "hard refresh" (ctrl + F5) the middle and right column do not "shift up" and leave a gap. (see attached picture). But if I refresh (just F5) firefox shifts them up to display the page as it should be seen.

Example Picture

The site itself.

Any ideas?

I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it.

Any ideas on how to rectify this?

Code:

<td><input type="text" class="loginbox" size="13" /></td>

.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}

Okay here's the problem, I have used px instead of % and I have a feeling it's ruined my whole site because of the fact that users can set their font size custom which TOTALLY messes up margins and things that I have set so precisely.

Here is my site: www.msredimp.000webhost.info

At small it works perfectly and the forms stay all normal, but when it's increased or decreased it totally ruins it.

Is there a way to force the settings in Mozilla to normal size? Or any other way?

Thank you, and sorry for being such a newbie.

Hi,

I'm trying to build a nav using css, I need to style each <li> within the nav becuase they need to be different lengths on the page. I have had it working fine on IE but I can'#t get it working for for any other browser.

Does soneone know how I can style each of my list items accordingly, notice the different block lengths for each one which is very important.

I have tried both id="Style" and class="Style" and no joy, I have also tried #nav ul li li li li li a:hover in my style without id or class in my HTML

Here is my Html

PHP Code:
<DIV id="nav"> 
              <ul>
                <li id="1"><a href="Home">Home</a></li>
                <li id="2"><a href="About-us">About us</a></li>
                <li id="3"><a href="FlexNews">FlexNews</A></li>
                 <li id="4"><a href="Careers">Careers</A></li>
                <li id="5"><a href="Contact">Contact</A></li>
              </ul>
</div> 





Pretty straight forward, now my css


PHP Code:
#nav
{
    width:1005px;
    vertical-align: middle;
    text-align: left;
} 
#nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
} 
#nav li
{
    float: left;
    text-align: left;
} 
 
#1 a{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#1 a:hover
{
    line-height: 20px;
    float: left;
    width: 215px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}

#2 a{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;



} 
#2 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#3 a
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#3 a:hover
{
    line-height: 20px;
    float: left;
    width: 211px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#4 a
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
} 
#4 a:hover
{
    line-height: 20px;
    float: left;
    width: 184px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: #FFFFFF;
}
#5 a
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #000000;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 17px;

} 
#5 a:hover
{
    line-height: 20px;
    float: left;
    width: 183px;
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #33A02C;
    text-indent: 17px;

} 






Here is an exmple link http://dev.121design.co.uk/flextrade2/

Works fine in IE but not in Firefox, heres hopling someone can help.

Thanks in Advance, tried so many different methods and none seem to work.

Cheers,
Stuart

Hi guys,

For a pure CSS site, is it still necessary to have height="82" and width="82" in <img ... /> ?


Moreover, is it depreciated to have a size="25" tag in <input elements? (I know it could ba handled in CSS but nice to have directly in the html).

Thank you

Hi,

I'm using XHTML & CSS (strict dtd) and using one large table to format my pages.

Within the table I have different alignments and any other sort of thing that you would find in a table.

W3.org says my XHTML --AND-- CSS are VALID, so why does the main table render off to the left of the page in Netscape??

Everything within the table is great, but the table itself is not centered.

I'm using CSS in the following manner to try to center it currently

Code:

<!-- All the doctype stuff and head tags go here...-->

<body style="text-align:center">

<!-- Rest of the document -->

It works greate in IE (but what doesen't), so is this the wrong attribute to use to center the documents content in Netscape.

As you may know "<center>" is not defined in the XHTML strict dtd so that options out.


Thanks for any help or suggestions,

Kalan

Hi All,

Developed a weird issue in FF and IE8 and am not sure what to do with it.

I have some tables that will just not display correct, the table is rendering a little too small and making the text overflow the cells. Its really odd and not sure what to do about it?

I took a screen shot in IE, but the have happens in FF.



Anyone any ides?

I only have IE 6, so Im not sure if I have the same trouble in other versions of IE. The site looks great in FF 2 though!

View: http://www.angelsar.org/development/funding.php - in FF then in IE6 and you cant miss what I'm talking about.

Here is the CSS that came with the template I'm using:

Code:

body   {
background: url(bg.png);
background-repeat: repeat-x;
background-attachment: fixed;
margin: 0 0 0 0 ;
}

div.top {
	height: 50px;
	background-color: blue;
	border-bottom: 2px solid #eaeaea;
	color: #fff;
	
}

div.top h1 {
	letter-spacing: -2px;
	font-size: 40px;
	margin: -5px 0 5px 0;
	padding-left: 10px;
	
}
div.top h1 a { text-decoration: none; color: white; }
div.body {
	padding: 10px;	
	font-family: tahoma;
}
div.left h2, div.right h2 {
	border-bottom: 1px dotted;

	font-size: 16px;	
	padding: 10px;
	margin-top: -0px;
}
div.right h5 {
	margin-left: 10px;
	margin-top: 0px;
}
div.left {
	background-color: #fff;
	padding: 5px;
	float: left;
	min-height: 400px;
	width: 200px;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
}
div.right {
	background-color: #fff;
	padding: 5px;
	min-height: 400px;
	margin-left: 220px;
	border: 1px solid #fff;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;	
}	
div.footer {	
	clear: all;
	margin-top: 15px;
	border: 1px solid #fff;
	font-size: 90%;
}

ul.menu  {
		list-style: none;
		margin: 0;
		padding: 0;
		border: none;
}

ul.menu li  {
	border-bottom: 1px solid white;
	padding: 1px;
}

blockquote {
	padding: 10px;	
	border-left: 1px dotted blue;	
}

ul.menu li a {
	padding: 5px;
	display: block;
	text-decoration: none;
	border-bottom: 1px dotted;
	border-left: 1px dotted;
	padding-left: 15px;
	font-size: 85%;
	
	
}
ul.menu li a:hover {
	background-color: #eaeaea;
	border-left: 10px solid blue;
	padding-left: 6px;
}

p {
	padding: 5px;
	font-size: 90%;
}

img.rightBorder { float: right; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.leftBorder	{ float: left; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.border	{ border: 1px solid #808080; padding: 5px; margin: 5px; }
span.gray { color: #808080; }	
span.gray a { color: #808080; text-decoration: none; }

The only thing that doesn't validate is clear: all; under div.footer but even when removing that, it doesn't solve my problem.

Any help would be appreciated!
Thanks!

How do I get a seperate scroll bar for the text on my website?

Hi,

I'm not overly accomplished when it comes to CSS so here's my question. I've got the following HTML code:
Code:

<input type="text" name="field1" value="value1" style="width:100%">

I'm preloading a value into this text field which may run past the visible length of the textbox. The text box is situated inside a table cell. The text box fills the table cell space completely whilst the text inside it does not run over but once the text is more than can be displayed in the space provided by the table cell, it forces the textbox to grow. My question is, is there a way around this so that I can still instruct the textbox to be 100% width of the table cell without expanding when the text overflows.

Thanks.

that is basically the question. I have a main div, where content will dynamically be placed, so it will change height frequently.

However, It has rounded corners, so either side of it I have 3 images, 2 of which are the corners, and one is a repeating y image.

If i set a fixed size for the containing div's height(<div id="submaincontainer">), everything will jump to that.(everything else is set to inherit) However, if it's height is set to auto (which is really what I want) everything will be 1px tall.

(URL address blocked: See forum rules)/cv/cv.html

This is my first project with trying to strictly use div tags and CSS rather than a table. A table seems like it would be incredibly easier. Anyone know how to make this work?

Heya, i've made dis treeview type "component", and sumthing is bugging me.

I used divisions and addEventListener("click", wutevafunc, false) + the setTimeout funtion to enable users to expand a subnode-containing-division by double clicking the node in the tree which contains dis..

the script works.. but you double click the actual text, it gets highlighted (like, if you where to click and drag it, to copy it). Wrapping a span round the text, makes it a lill neater, since it won get highlighted if you do the double click next to the text (the containing div is wider than the text).. I tried scripting out of this too, by calling the click method on another element when the doubleclick was confirmed.

so, question, is it possible to make text non-highlightable with css? i cant seem to find a css-"knob" for that anywhere..

If you go here

company.com layout

It looks correct in IE or Firefox

But in Chrome/Opera the text is a different Font and is bigger and it messes stuff up.

Here is the CSS where font is defined for body. All other elements are defined with the same Font declaration.

body
{
background: #e3edc2; color: #333;
font: .8em, arial, helvetica, sans-serif;
margin: auto;
padding:0px;

}

I have a very simple question:

I have this html code:
Code:

<div id="text">
<p><a>text</a></p>
<p><a class="red">text</a></p>
<p><a>text</a></p>
</div>

And this CSS style:
Code:

.red {  color: red;  }    
#text a{  color: blue;  }

I would like to apply the .red class, but it does not work, because the #text a overrides it. How can I solve that? It is just an example because it is a cause of a problem generated by a CMS, and I can only play with the CSS, not with the HTML side.