CSS - Misaligned Box And Text

Hi,

I made an intranet webpage using PHP, MySQL, some JavaScript (collapsible 'windows') and CSS.

In IE8 it looks like the image on the left. In Firefox 3.6 it looks like the image on the right.

The rows are actually separate div elements, with tables inside them; this seemed to be the only way I could get the collapsible animation script to work without error.

Without subjecting myself to the humiliating scrutiny of my appalling coding, is there any obvious tip towards making the table on the left appear a little more like the table on the right?

The reason why I want to use IE8 to view this page is, in part, to take advantage of its ability to link to folders on the file system - something that Firefox cannot do (at least not without some customizing).

I hope that makes sense and, as always, any help appreciated.

My form's Submit and Reset buttons are centered and aligned properly in Firefox and Opera, but ,of course, look ridiculous in Internet Exploder 7 - aligned center, but stacked vertically with the Submit button on top of the Reset. My form markup is below - can you tell me how to apply correct CSS to make my buttons behave in IE? If it matters, keep in mind that my form appears in the page's center column. The left column is floated left and the right column is floated right.
Code:

<div id="directory">
.
<ul>
   <li>
      <input class=\"submit\" name=\"submitButton\" type=\"submit\" value=\"Let's see 'em\" />&nbsp;&nbsp;
      <input class=\"submit\" type=\"reset\" value=\"Clear the Form\" />
   </li>
</ul>
.
</div>

and here's the applicable styling already in place:

#directory fieldset {
   margin:1.5em 0 0 0; padding:0;
}
#directory legend {
   margin:0;
   padding-left:15px;
   font-weight:bold;
}
#directory fieldset ul {
   list-style-type: none;
   padding: 1em 1em 0 1em;
}
#directory fieldset ul li {
   padding-bottom: 1em;
}

Do any questions get answered here?

How would I get a simple input form to align with a submit button?

You can see the problem at: bit.ly/ovFGhR
The CSS txt file: bit.ly/nMyP45

My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned.

Please help!!

Hi, Hope someone here can help me, having trouble with IE - there's a surprise! - and block elements, more specifically <p> and <ul>.

As you can see from he

http://dvxl.servehttp.com/Sites/Development/InfoCAP/Sites/dynamic/

.. the first line of the top paragraph has a larger line height than the rest, same with the top <li> of the <ul>.

The xhtml is empty of styles, and the only styles applied to these elements a

Code:

#main_content p {
margin-top: 0px;
margin-bottom: 15px;
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 0.7em;
text-align: justify;
text-justify: newspaper;
}

#main_content ul li {
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 0.7em;
list-style-type: square;
}

#main_content li {
line-height: 15px;
}

In Firefox the line heights are consistant, am I missing something?

Thanks

Hello all

I have a page that uses css for the layout. The issue that I can not figure out how to fix is when someone re-sizes their browser the page content is all resized. How would I lock th positions of each span on the page so even if they resize (smaller) the browser the span's will stay where they are when the page is fully maximized on the users screen?

I hope it is clear what I am asking. I tried puttin like a float tag but that does not work at all.

Thanks all
Jason

Good Morning All,

Been having a slight problem with the visual in the screenshot below.

The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement.

***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned.

text
-----------------------------------------------------------

rather than

text
------

and obviously by the css, the underline on the headers is a small image, repeated - x.


Please see relevant css information.

* (line 23)

{

margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 0pt;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 0pt;

}

h2, h3, h4, h5, h6 (line 101)

{

font-size: 1.2em;

font-weight: normal;

padding-bottom: 4px;

margin-top: 0.6em;

margin-right: 0pt;

margin-bottom: 0.8em;

margin-left: 0pt;

text-align: center;

}

.contentArea h2, #secondaryNavigation h2 (line 114)

{

background-color: transparent;

background-image: url("../images/h2_gradient_bg.gif");

background-repeat: repeat-x;

background-attachment: scroll;

background-position: left bottom;

color: #0066cc;

}


Many Thanks in advance.

Marc.

I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced.

any idea ? tutorial? let me know if i need to explain more.

can someone help me with this?
here is the page&css I have been working on...

the page file
the css file

I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site?

this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!!

I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example:

Code:

<html>
<body>
<td><p style="text-align:right">Google</p></td>
<td><a href="http://www.google.com" style="text-align:right">Google</a></td>
<td><a style="text-align:right" href="http://www.google.com">Google</a></td>
<td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td>
<td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td>
<span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span>
</body>
</html>

The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions?

(My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.)

i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text.

I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece

Hi.
See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should.
Please also read some comments in the code.

Code:

<html><body><center><br><br>
Why does image not force the outermost span to be at least as high as image?<br>
If the text are long enough and gets below the bottom border of image it look good though.<br><br>
NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br>
In my real application I'm using an <a href=" ...> around the outer span in examples below.<br>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;">
		<span style="display:block; float:left">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0">
		</span>
		
		<span style="display: block; color: white;">
			Text here. 
		</span>
	</span>
</td></tr></table>

<br><br>
<table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td>
	<span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;">
			<img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left">
			Text here.
	</span>
</td></tr></table>

</center></body></html>

I'm having trouble with a page I'm working on- I posted here a few weeks ago with something sort of similar. This time, though, I'm at a loss, I've tried several different things but nothing worked.


http://www.geocities.com/nny555/eup/newschedule.html


As you can see, the div where the content is, the text is stretching right through the div. Is there any way to fix this?

Is it possible to have text run around a div positioned with absolute positioning?

Hmm, This is a problem that has plagued me for a while, but just recently decided to find a solution.

Basically I like to single out words for empasis on certain pages. Well with EM that's fine. However on a new website I'm coding I need to do (TYPE 1 FONT) (TYPE 2 FONT) (TYPE 3 FONT). All are different decorations. Is there a way to create a tag for each word?

Thanks.