4 replies to this topic

[jordan.]

I have a simple search form with one input field and a submit button. The fields are vertically centred in place using line height and this works well in all browsers except Opera.

Take a look here: http://kitescoop.com...ewforum.php?f=2

It is the search box in the top right corner.

What makes this especially confusing is that I have a custom home page for that forum here which uses a different stylesheet but practically the same code for the search form. On the home page, it centers fine.

Here is what it looks like in Opera:


Here is what it looks like in every other browser:


Here is the relevant code:

HTML (look at <div id="search-box">)

<div id="header-box">
	<h1><a href="{U_INDEX}">{SITENAME}</a></h1>
	<h2>{SITE_DESCRIPTION}</h2>
	<div id="top-nav">
		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					<input class="button2" value="{L_SEARCH}" type="submit" />
				</fieldset>
				</form>
			</div>
			<script type="text/javascript">
				$(function() {
					//find all form with class jqtransform and apply the plugin
					$("form.jqtransform").jqTransform();
				});
			</script>
		<!-- ENDIF -->
	</div>
	<div id="main-nav">
		<ul id="main-nav-primary">
			<li><a href="http://www.kitescoop.com/" class="nav-home">Home</a></li>
			<li><a href="http://www.kitescoop.com/videos/" class="nav-videos">Videos</a></li>
			<li><a href="http://www.kitescoop.com/photos/" class="nav-photos">Photos</a></li>
			<li><a href="http://www.kitescoop.com/forum/" class="nav-forum">Forum</a></li>
		</ul>
		<ul id="main-nav-secondary">
			<li><a href="http://www.kitescoop.com/articles/" class="nav-articles">Articles</a></li>
			<li><a href="http://www.kitescoop.com/interviews/" class="nav-interviews">Interviews</a></li>
			<li><a href="http://www.kitescoop.com/artists/" class="nav-artists">Artists</a></li>
			<li><a href="http://www.kitescoop.com/tricks/" class="nav-tricks">Tricks</a></li>
			<li><a href="http://www.kitescoop.com/store/" class="nav-store">Store</a></li>
		</ul>
	</div>
</div>

CSS:

#header-box {
	background-color: #000;
	padding: 20px 9px 10px 9px;
	position: relative;
}

#header-box h1 {
	display: block;
	position: absolute;
	z-index: 10;
	left: 30px;
	top: 26px;
}

#header-box h1 a {
	display: block;
	background: transparent url('{T_THEME_PATH}/images/logo.gif') no-repeat top left;
	width: 242px;
	height: 144px;
	text-indent: -9000px;
}

#header-box h2 {
	display: none;
}

#top-nav {
	background: #000 url('{T_THEME_PATH}/images/menu_bg.gif') repeat-x top left;
	height: 41px;
}

#top-nav #search-box {
	float: right;
	height: 41px;
	line-height: 41px;
	margin-right: 16px;
}

#top-nav #search-box fieldset {
	border: none;
	height: 41px;
	padding: 0;
	margin: 0;
	font-size: 11px;
}

#top-nav #search-box fieldset input[type="text"] {
	height: 23px;
	width: 164px;
	background: transparent url('{T_THEME_PATH}/images/input.gif') no-repeat top left;
	border: none;
	padding: 0 4px;
	margin: 0;
	font-size: 11px;
	line-height: 23px;
	color: #919191;
}

#top-nav #search-box fieldset input[type="submit"] {
	height: 23px;
	width: 70px;
	background: #181818 url('{T_THEME_PATH}/images/search.gif') no-repeat top left;
	border: none;
	padding: 0;
	margin: 0;
	font-size: 11px;
	line-height: 23px;
	text-indent: -9000px;
	cursor: pointer;
}

#main-nav {
	margin-top: 16px;
	background: #000 url('{T_THEME_PATH}/images/under_menu_bg.gif') repeat top left;
	height: 108px;
	position: relative;
}

Link to full stylesheet: http://kitescoop.com.../stylesheet.css

Link to home page stylesheet for comparison: http://kitescoop.com.../home_style.css



Any help on this is much appreciated. I am completely stumped here.

Thanks,
Jordan

[+hedleigh]

They look the same to me and the link looks like it should. Using Opera 12 build 1467.

[+Seahorsepip]

line-height works only fine with text with other lements it starts to give bugs, use margin instead

[jordan.]

EDIT: Aha. Looks like it's the Doctype. Using XHTML 1.0 Strict on the home page and XHTML 1.0 Transitional through the rest of the forum. I can't change the rest of the forum to strict as it would take too much work correcting errors. Got to find a workaround.

They look the same to me and the link looks like it should. Using Opera 12 build 1467.

That's the same version and build that I am using and I've tested it on 2 separate computers with the same broken result.

line-height works only fine with text with other lements it starts to give bugs, use margin instead

Line-height should work for all inline elements. Hence why it works in every other browser and even on the home page in Opera.

[jordan.]

Ended up centering it using margins. Works now in all browsers but damn it opera y u no line-height.