CSS - Form Buttons Misaligned In Ie

I am attempting to create a website for a hockey company, however I am at a loss with how to get the effects that I want. I am a novice web designer, and have tried so many different ways of coding this site. Frames, tables, and recently looked up a tutorial on slices in photoshop. My issue is that I am loading everything as an image and I'm afraid that my load time is going to be a lot more than it needs to be. Also, I can't get text and preview images to overlay the background where I want them to. I am trying to use AP elements, but since I have the website centered and the elements are an absolute value, depending on your window size the elements are misplaced. I am open to any and all suggestions as to how I should go about making this website while maintaining the style. I have a feeling I'm not going about this the most efficient way.


I tried posting a link to the site but apparently new users can't post URLS?? If you are willing to help me out I'd really appreciate it, let me know how to get you the address.

Thanks in advance!

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.

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

I've come across a bit of a problem, and I need some help.

Here's the deal: I'm creating a button system that will allow for easy placement of BBCode tags. Obviously, I'm using <form> and <input type="text"> elements to construct the buttons.

I found out that I can edit button labels through some simple CSS. I'm having a problem, though, with underlining text in one particular button.

Here's the code in question:

PHP Code:
<input type="button" value="Underline" style="text-decoration: underline;" accesskey="u" /> 




Now, this code works correctly in IE (what a suprise :O), but FF fails to draw an underline under the button's text. I know its possible, because if you go onto any PHPBB-based forum you'll see two buttons that have underlined titles.

Any idea how I should go about fixing this problem? I tried to reverse-engineer some of PHPBB's code, but alas to no avail. Help me if you can, please!

Hi all. I've got a quick question about the formatting of form buttons.

Currently I apply a class with the following properties to my form buttons:

Code:

.formbutton {
font-family:       Arial,Verdana,Tahoma,sans-serif;
font-size:         11px;
background-color:  #e8dfb6;
}

The buttons appear fine, but when I have some long text in the button, for example "Go back to the content tree", there is around 3/4 of an inch of space on either side of the button.

Is there any way to control this? On other buttons with text such as "update all" or "delete all" there is a little space but not much.

It seems like the more text there is in a button, the more space which will be inserted on either side of the text, and that to me seems kinda dumb.

Does anyone know if there is any way to control this?

Cheers and TIA,

Pablo

I am at a total loss on this one.

I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box.

As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself).

At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy.

Css:
Code:

/* Navigation */

#nav { 
	width: 821px;
	height: 18px;
	border: 1px;
	border-style: solid;
	border-color:red;
}


#nav ul { 
}

#nav li {
	display:inline;
	float:left;
	background-color:#9E0C0C;
	text-align:center;
	color:white;
	font-family: arial, san-serif;
	font-size: 14px;
	font-variant: small-caps;
}

and page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="nav">
 	   		
			<ul>
				<li>Home</li>
				<li>XXX</li>
				<li>XXX</li>
				<li>CCC</li>
				<li>HHH</li>
				<li>JJJ</li>
				<li>kkk</li>
				<li>KKK</li>
			</ul>
	</div>
</body>
</html>

(As I said, I've stripped it to absolutely nothing else.)

Any suggestions would be welcome.

(ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.)

I'm trying to adjust the left and right padding in a form submit button (to fake a normal-looking link so I can use the form to pass php variables w/ $_POST instead of $_GET)...

I've put the padding-left:0em; everywhere I can think of, can't seem to influence the submit button padding.

Does anyone know anything about this one? Tricky...

My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons.

If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons.

Here is the site:
http:// bradleyrose . net / WaterStreetRestaurant

I want to get buttons like these with my CSS: http://members.cox.net/npalmi188/test.jpg
how do I do this? (don't worry about the color codes)
everytime I try to get something near it I get this gay gray extra bevel to my button, anybody know how to fix that? here's the code I was using that had the gray bevel:
Code:

input.button 
     { 
       font-family: MS Sans Serif;
       font-weight: none;
       font-size: 10px;
       color: #ffffff;
       background: #4C5844;
     }

I'm designing a web site and I have everything look identical in IE 5.01-7, Firefox 1.5 and Opera 9 (I still have to check mac compatibility) - though one thing that isn't the same on all is the input buttons. In IE, they're relatively the same but in Firefox it is completely off. I've attached an image to show what they all look like. I've tried a few things but I can't manage to get the firefox button to align correctly with the text input to the left of it.

Here's my CSS for the inputs:
Code:

input {
	background: #fff;
	border: 1px solid #000;
	height: 23px; }

any help is appreciated, thank you!

Okay so I have a basic CSS navigation panel on the left-hand side of my webpage. Basically I surrounded an <li> tag with a solid border so it's a rectangle with some text in the middle (ie. about, home, contact us, articles, etc) and I linked it using an <a> tag:

Example:
Code:

<ul>
<a href="home.html" class="button"><li>HOME</li></a>
<a href="about.html" class="button"><li>ABOUT</li></a>
...
</ul>

Then for CSS:
Code:

#navigation ul {
	width: 128px;
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation li {
	background: #CCC;
	padding-left: 5px;
	margin-top: 5px;
	border: 1px solid #000;
	border-left: 10px solid #336699;
}

#navigation a.button {
	color: #333;
	text-decoration: none;
}

#navigation a.button:hover {
	color: #FFF;
}

The url is: Wolfenzon Schulman

It's a website for a firm I work for. So basically, on the FF edition, the buttons work as intended, the entire <li> tag is linked (<a>'ed) and you can click on any part of it to activate the :hover and follow the link. The IE version, you can only hover over the text and anywhere before that (probably because of the padding-left: 5px associated with it). No matter what I've seemed to come up with, the IE version will just not cooperate.

Simple question but I'm curious if anyone can work out how the 'Browse' buttons are done on this page, they have rounded corners yet looking through the css I can't see any images that account for them... http://www.haveamint.com/forum/

Hi,

Im just learning css and notice that alot of elements such as navigation can be done using bullet points.

Im wanting to make the .nav div into a button so i need to to be 30 pixels high and have a have a 1pixel white line underneath it, also is there a way to stop the indent?

my second question is when i add an image as a bullet point its aligned to the bottom of the text, can you change the position of it so its in the middle of it?

Code:

.nav {
	height:30px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	line-height:30px;
}

.bul-sec {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-position: outside;
	list-style-image:url(images/bullets/sec.gif);
	line-height:30px
}

or is there a better way to do this? Thanks!

The problem that I am having is that my nav buttons will not show up unless you click on the the space first than they are there. This is the code it is done is html, css and php help would be great thanks. PHP Code:
<?php ?>
<html>
<head>
<title>CSS</title>
<style type="text/css"> 

a.menu , a.menu:link {
font-family:Arial, Helvetica, sans-serif;
font-weight : bold;
font-size:12px;
line-height : 30px; 
text-align : center;
text-decoration:none; 
color : #ffffff; 
} 
a.menu:visited {
background : url('Images/Untitled-1.png') no-repeat 0% 0%; 
width: 160;
height: 35;
color : #ff0000; 
} 
a.menu:hover {
background : url('Images/Untitled-2.png') no-repeat 0% 0%; 
color : #ffffff; 
font-weight : bold; 
} 
a.menu:active , body {
background : url('Images/Untitled-2.png') repeat; 
font-weight : bold; 
line-height : 30px; 
text-decoration : none; 
text-align : center; 
color : #ffffff; 
} 
body {
background-image : url(Images/brushedmetallighter.jpg); 
} 


</style>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>
<table width="199" height="210" border="0" align="left" bordercolor="#666666">
  <tr>
    <td width="187" height="80" align="left" valign="top" background="brushedmetallighter.jpg">
      <?php  
$hostname = "xxxx";    
$database = "xxxx";   
$username = "xxxx";   
$password = "xxxx";   
$connpt = mysql_pconnect($hostname, $username, $password) or trigger_error(mysql_error(),E_USER_ERROR);     
mysql_select_db($database, $connpt);    
$sql = "SELECT * FROM mega ORDER BY productsID";    
$result = mysql_query($sql, $connpt) or die(mysql_error());    
if (mysql_num_rows($result) < 1) {    
    print "There are no items to display.";    
}  
else {     
    while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {    
        $Name = $row['productsName']; 
        $productsID = $row['productsID']; 
        $LeftBanner = $row['LeftBanner'];
        $BottomBanner1 = $row['BottomBanner1'];
        $BottomBanner2 = $row['BottomBanner2'];
        $BottomBanner3 = $row ['BottomBanner3'];
        $UpperLeftImage = $row ['UpperLeftImage'];
        $UpperRightImage = $row ['UpperRightImage'];
        $LowerLeftImage = $row ['LowerLeftImage'];
        $LowerRightImage = $row ['LowerRightImage'];      
        $Label = $row['Label'];   
        echo "<a href=\"mg_frame3.php?productsID=".$productsID."\"target=\"mainFrame\" class=\"menu\">".$Label."</a>  ";    
    }  
} 
?>
   </td>     
  </tr>
  <tr>
    <td height="50" align="left" valign="top" background="brushedmetallighter.jpg"><p><br>
        <br>
      </p>
    </td>
  </tr>
  <tr>
    <td height="71" align="left" valign="top" bordercolor="#000000" background="brushedmetallighter.jpg></td>
  </tr>
</table>
</body>
</html>