HTML & CSS

Welcome to Dream.In.Code
	Getting Help is Easy! Join 86,260 Programmers. There are 1,941 online right now! Ask your question and get quick answers from Dream.In.Code experts. Join the #1 programming help community on the internet! Registration is fast and FREE... Join Now! Chat LIVE With a Expert Powered by LivePerson.com Register to Make This Box Go Away!

Multibrowser CSS issues

Multibrowser CSS issues, Floating a div onto same line as TH

Options

Nova Dragoon

30 Apr, 2008 - 06:35 AM

Post #1

The Innocent Shall Suffer, Big Time

Joined: 16 Aug, 2001
Posts: 5,754

I am having a few cosmetic issues between my browsers.

First being the placement of the filter drop down.

Firefox and Safari behave how I desire (see firefox.png attachment)
Opera and IE7 render the filter and tableheaders on seperate lines (see opera.png attachment)

Any Ideas how I can get opera/ie7 to render that section like firefox/safari do?

here is the relevent section of the page:

html


<body>
<div id="Container">
<div id="Top">

<img src="/media/logo.jpg" alt="TCC Logo" />
<h1>Ticket Web</h1>

<br />
<div id="Session">
	<p>You are logged in as: khan | <a href="/ticketweb/logout/">logout</a></p>
</div>

<div id='Menu'>
	<a href="/ticketweb">View Tickets </a> | <a href="/ticketweb/newticket/">Open a New Ticket</a>
	
	| <a href="http://www.nmt.edu/tcc/doc/uc/openhand/tickets.html" target="about:blank">Help</a>

</div>
</div>

<div id="TicketList">

<div id="Filter">
 <form name="filterform" action="." method="get">
 	    
			<label for="id_filter">Filter</label>
			<select onchange="this.form.submit();" name="filter" id="id_filter">
<option value="all">All</option>

<option value="active">Active</option>
<option value="closed">Closed</option>
<option value="cancelled">Cancelled</option>
<option value="deferred">Deferred</option>
<option value="unresolvable">Unresolvable</option>
</select>
        <noscript><input type="submit" value="Submit" /></noscript>
 </form>
</div>

<table>
<tr>
<th>Ticket ID</th> <th>Status</th> <th>Description</th>
</tr>

	<tr class="row1">
		<td><a href="/ticketweb/ticket/20080429095348/">20080429095348</a> </td>
		<td><p>active</p></td>

		<td> <p>no javascript test</p></td>
	</tr>

And the CSS I am using

css


#Container{
		width: 780px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 5px;
		padding-top: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      font-family: "Luxi Sans", verdana, arial, sans-serif;

}


#Top {
        margin: 0px;
        overflow: auto;
        padding: 0px;
        width: auto;
        clear: both;
}
#Top img{
		float: left;
		margin-right: 30px;
}

#Top h1{
        font-size: 42px;
        color: #333333;
        font-weight: bold;
        padding-top: 30px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        margin: 0px;
}

#Top h2{
        color: #595959;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
        margin: 0px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 10px;
}


#Session {
		float: left;
		margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 2px;
      margin-left: 10px;
}

#Session p{
	     font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #757575;
        margin: 0px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        
}
#Session a{
           
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #757575;
        text-decoration: underline;
        font-size: 12px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 1px;
        margin-left: 0px;
        
}

#Menu{
		width: 100%;
		float:left;
		
}

#Menu p{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #555555;
        margin: 0px;
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        
}
#Menu a{
           
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #555555;
        text-decoration: none;
        font-size: 14px;
        margin-top: 0px;
        margin-right: 10px;
        margin-bottom: 1px;
        margin-left: 10px;
        
}

#Filter {
		  float: right;
		  color: #EEEEEE;	
		  margin-right: 5px;
}	



#TicketList {
		  background: #999999;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        vertical-align: bottom;
        position: relative;
        
  

}
#TicketList p{
	     font-family: sans-serif;
        font-size: 14px;
        margin-top: 7px;
        margin-bottom: 7px;
        font-weight: normal;
        color: #333333;
}

#TicketList a{
	     font-family: sans-serif;
        font-size: 14px;
        font-weight: normal;
        text-decoration: underline;
        color: #333333;
}

#TicketList table{
		background: #999999;
		width: 100%;
		padding: 2px;
		border: 0px;
		border-style: hidden; 
		border-spacing: 0px;
}
#TicketList th{
	     font-family: sans-serif;
        font-size: 14px;
        font-weight: normal;
        text-decoration: none;
        color:	#EEEEEE;
        text-align: left;
        padding-left: 3px;
        padding-top:  3px;
        padding-bottom: 4px;
        
}

#TicketList td{
		padding: 2px;
		padding-left: 5px;
		margin: 0px;
}


#TicketList tr.row1{
	background: #FFFFFF;
	margin: 0px;

}
#TicketList tr.row2{
	background: #e4e6e8;
	margin: 0px;
}



#TicketView{
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        vertical-align: bottom;
        position: relative;
}


#TicketView h1{
        font-family:  sans-serif;
        font-size: 30px;
        color: #000000;
        font-weight: bold;
}

#TicketView div.chead{
	background: #e4e6e8;
	color:	#333333;
	padding: 2px;
}
#TicketView div.cbody{
	padding: 10px;
}


#TicketView a{
        font-size: 14px;
        font-weight: normal;
        text-decoration: underline;
        color: #0066cc;
        
}

#TicketView pre{
    white-space: -moz-pre-wrap;
    font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
    font-size: 0.8em;
}

#TicketInfo{
}

#TicketInfo table{
		width: 100%;
		padding: 2px;
		border: 0px;
		border-style: hidden; 
		border-spacing: 1px;
}

#TicketInfo td.title{
	background: #e4e6e8;
	margin: 0px;
	text-align: right;
	color: #444444;
	padding: 5px;
}

#TicketInfo td.data{
	margin: 0px;
	padding: 3px;
	padding-left: 5px;
	text-align: left;
	color: #444444;
}




#Login {
		width: 300px;
		margin-left: auto;
		margin-right: auto;
}

Attached thumbnail(s)

Nova Dragoon	1 May, 2008 - 10:14 AM Post #2
The Innocent Shall Suffer, Big Time Joined: 16 Aug, 2001 Posts: 5,754	I moved the div into a <th> it mostly works, and doesn't break validation so muh I guess.

Not The Right Answer?

Ask an Expert Now...
Join For Free!

Dream.In.Code has thousands of experts online right now to answer your question! Registration is FREE! Join one of the largest programming and web development communities on the internet. You'll have instant access to hundreds of tutorials and thousands of code snippets.

Register for Free to Make This Ad Go Away!

girasquid	1 May, 2008 - 10:37 AM Post #3
Barbarbar Joined: 3 Oct, 2006 Posts: 953	Waitasec...couldn't you just use absolute positioning inside the th to do this, without the need for floating? The th will be the proper height because of the other elements inside of it, and the div will be where you want it to be.

Nova Dragoon	1 May, 2008 - 10:50 AM Post #4
The Innocent Shall Suffer, Big Time Joined: 16 Aug, 2001 Posts: 5,754	The thing is it works outside the <th> in firefox and safari, and it just seems kinda off to me to stick it into the table header, Tables are meant for data and not for formatting.

girasquid	1 May, 2008 - 02:00 PM Post #5
Barbarbar Joined: 3 Oct, 2006 Posts: 953	Yeah, that's true. I guess whatever works for you is whatever works - you've already solved the problem, I just wasn't sure if you'd considered the positioning option.