Be Excellent To Each Other

And, you know, party on. Dude.

All times are UTC [ DST ]




Reply to topic  [ 10 posts ] 
Author Message
 Post subject: Is this a CSS problem, or something else?
PostPosted: Sat Mar 27, 2010 14:01 
Awesome
User avatar
Yes

Joined: 6th Apr, 2008
Posts: 12326
Hello, since yesterday I have noticed that the search box on my site disappears when I use Opera.
Attachment:
opera1.jpg


But if I turn off CSS and then back on again it (sometimes) reappears. But looking well wonky.
Attachment:
opera2.jpg


However, in Internet Explorer, it appears as it should (barring my poor skills)
Attachment:
ie3.jpg


Is this a problem with something in my CSS file hiding it when it shouldn't be? Or is it getting stuck behind other elements maybe? My first thought was that it was a Javascript issue (because the search uses some), but turning off Javascript doesn't affect the visibility in Opera.

Anyone got any ideas?


You do not have the required permissions to view the files attached to this post.

_________________
Always proof read carefully in case you any words out


Top
 Profile  
 
 Post subject: Re: Is this a CSS problem, or something else?
PostPosted: Sat Mar 27, 2010 14:36 
User avatar
Part physicist, part WARLORD

Joined: 2nd Apr, 2008
Posts: 13421
Location: Chester, UK
Can you post the relevant bits of the source and CSS?


Top
 Profile  
 
 Post subject: Re: Is this a CSS problem, or something else?
PostPosted: Sat Mar 27, 2010 14:57 
Awesome
User avatar
Yes

Joined: 6th Apr, 2008
Posts: 12326
Code for header:
ZOMG Spoiler! Click here to view!
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
countryElement = document.getElementById('countries');
updatecities(countryElement.selectedIndex, ''); document.classic.action=(countryElement.options[countryElement.selectedIndex].value);
};
// ]]>
</script>

</head>
<body>

<div id="page_header">
<div id="page_title">
<h1>
<img src="images/header_logo.jpg" width="22" height="22" alt="" />
<span>Bargain Comparison</span>
</h1>
</div>
<div id="header_search">

<form name="classic" method="post" action="error.php" id="mainsearch">
<input name="INPUT" id="INPUT" size="30" type="text" value="" />
<select name="countries" id="countries" onchange="updatecities(this.selectedIndex); document.classic.action=(this.value)" style="width: 135px">
<option value="">Choose a category</option>
<option value="searchdvds.php" >DVDs</option>
<option value="searchgames.php" >Games</option>
<option value="searchcds.php" >CDs</option>
<option value="searchbooks.php" >Books</option>
</select>

<select name="cities" style="width: 100px">
</select>

<input class="topsearchbutton" type="submit" value="Go" name="search" />
</form>

<script type="text/javascript">

var countrieslist=document.classic.countries
var citieslist=document.classic.cities

var cities=new Array()
cities[0]=""
cities[1]=["Title|dvdtitle"]
cities[2]=["XBox 360|xbox360", "PS3|PS3", "Wii|wii", "DS|NDS", "PSP|PSP", "PC|PC", "XBox|XBox", "PlayStation|PS", "PS2|PS2", "GameCube|GCube", "GBA|GA"]
cities[3]=["Title|cdtitle", "Artist|artist"]
cities[4]=["Title|booktitle", "Author|author"]

function updatecities(selectedcitygroup, selectedvalue){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++) {
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
if (selectedvalue && cities[selectedcitygroup][i].split("|")[1] == selectedvalue) {
citieslist.options[citieslist.options.length - 1].selected = true;
}
}
}
}



</script>

CSS for header form:
ZOMG Spoiler! Click here to view!
form#mainsearch {
background-color: #cccccc;
color: #000000;
border-top-color: #999999;
border-left-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
font-family: "Verdana", "Arial", "Helvetica", sans-serif;
font-size: 10px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
float: right;
}

default values:

form {
display: block;
}

inherited from div:

#page_header {
text-align: left;
}

inherited from body:

body {
color: #7b7b7b [overridden];
text-align: center [overridden];
font-family: "tahoma", sans-serif [overridden];
font-size: 11px [overridden];
}

_________________
Always proof read carefully in case you any words out


Top
 Profile  
 
 Post subject: Re: Is this a CSS problem, or something else?
PostPosted: Sat Mar 27, 2010 15:45 
User avatar
Part physicist, part WARLORD

Joined: 2nd Apr, 2008
Posts: 13421
Location: Chester, UK
I'll have a proper look when I get to a computer for you.

Do yourself a favour and employ some CSS shorthand, though!

Code:
#mainsearch {
    border: 1px solid #999;
    padding: 3px;
}


Hex values can be shortened if they repeat, so #999 is the same as #999999; #c12 would be #cc1122, for example.

But anyway, I'll have a look later for you.


Top
 Profile  
 
 Post subject: Re: Is this a CSS problem, or something else?
PostPosted: Sat Mar 27, 2010 16:34 
Awesome
User avatar
Yes

Joined: 6th Apr, 2008
Posts: 12326
Heh, I normally do shorthand, but that's copied and pasted from the Opera developer thingy built into the browser, and it automatically expands everything.

That's why it tells me which rules are inherited from parent elements, and which are overridden. Sorry if it makes it more confusing.

_________________
Always proof read carefully in case you any words out


Top
 Profile  
 
 Post subject: Re: Is this a CSS problem, or something else?
PostPosted: Tue Mar 30, 2010 16:24 
Awesome
User avatar
Yes

Joined: 6th Apr, 2008
Posts: 12326
I don't suppose anyone else has had any ideas? I'm baffled!

_________________
Always proof read carefully in case you any words out


Top
 Profile  
 
 Post subject: Re: Is this a CSS problem, or something else?
PostPosted: Tue Mar 30, 2010 16:44 
SupaMod
User avatar
Est. 1978

Joined: 27th Mar, 2008
Posts: 69668
Location: Your Mum
Have you tried taking the height off #page_header to see it it's hiding below your logo?

_________________
Grim... wrote:
I wish Craster had left some girls for the rest of us.


Top
 Profile  
 
 Post subject: Re: Is this a CSS problem, or something else?
PostPosted: Tue Mar 30, 2010 19:53 
Awesome
User avatar
Yes

Joined: 6th Apr, 2008
Posts: 12326
Grim... wrote:
Have you tried taking the height off #page_header to see it it's hiding below your logo?


By Jesus! Not quite, but it nudged me to finding the right solution.

Changing the height of that header brought it back into view, as it was indeed hiding, but it also messed up the rest of the layout. However, right above that in the CSS file was a width of 280px for the header image which is only 216 wide.

So the images being too wide was pushing the search box downwards!

Cheers!!!

_________________
Always proof read carefully in case you any words out


Top
 Profile  
 
 Post subject: Re: Is this a CSS problem, or something else?
PostPosted: Tue Mar 30, 2010 20:58 
User avatar
Part physicist, part WARLORD

Joined: 2nd Apr, 2008
Posts: 13421
Location: Chester, UK
Shit. I never did remember to look into this properly for you. Glad you found the solution though, chap. Apologies anyway!


Top
 Profile  
 
 Post subject: Re: Is this a CSS problem, or something else?
PostPosted: Tue Mar 30, 2010 21:28 
Awesome
User avatar
Yes

Joined: 6th Apr, 2008
Posts: 12326
Malabar Front wrote:
Shit. I never did remember to look into this properly for you. Glad you found the solution though, chap. Apologies anyway!


Nah, thanks for looking! Sometimes you just need a fresh pair of eyes.

_________________
Always proof read carefully in case you any words out


Top
 Profile  
 
Display posts from previous:  Sort by  
Reply to topic  [ 10 posts ] 

All times are UTC [ DST ]


Who is online

Users browsing this forum: Columbo, Majestic-12 [Bot], The Greys and 0 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search within this thread:
You are using the 'Ted' forum. Bill doesn't really exist any more. Bogus!
Want to help out with the hosting / advertising costs? That's very nice of you.
Are you on a mobile phone? Try http://beex.co.uk/m/
RIP, Owen. RIP, MrC. RIP, Dimmers.

Powered by a very Grim... version of phpBB © 2000, 2002, 2005, 2007 phpBB Group.