|
CSS - Misbehaving Double Text On Search Button
Have two search boxes on the Advanced Search page of my Drupal site. The first is well-behaved and sits up in the right corner.
I have replacement images for the submit buttons on the search boxes of both. On the first one, the html generated text is good and gone. On the second one, it's on top of the image. Somehow I'm not addressing the second search button correctly to have the 'text-indent: -9999px;' apply. Here's the misbehaving html in question: Code:
<!--[if IE]><div class="IEroot"><![endif]-->
<div class="container-inline">
<div class="form-item">
<input type="text" maxlength="255" name="keys" id="edit-keys" size="40" value="" class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
</div>
<!--[if IE]></div><![endif]-->
Here's the CSS I'm trying to address it with: Code:
.IEroot .container-inline .form-item input.form-submit {
width: 73px;
text-indent: -9999px;
}
I'd be grateful for any help. Similar TutorialsHi guys, We CANNOT get our Google Custom Search box and the search button to align correctly in IE or Chrome. It looks COMPLETELY different in both, and wrong in both. You can see the search box on our site (Search Google for DJDEALS) since we can't post URL's. We can't get the search box height to be any bigger than it is (ideally the box and button are the same height) and we can't get both items to align together. In Chrome the button is below the text box, in IE the button is above it! CODE: #search{margin:auto;right:34px;top:188px;position:absolute} .gsc-completion-container{text-align:left;z-index:5 !important;} input.gsc-input{height:28px} Help? I have a table cell that's 755px wide. It has an image map that's 375px wide on the left and is supposed to have a list of links to the right. I wrapped the list of links in a div tag and set it to display inline. Even though there's plenty of room for the div to sit inline next to the image map, it keeps creating a new line. How do I get these two assets to sit next to each other inside the table cell without the list of links creating a new line? Why does the div tag behave like a block element despite the inline attribute? Hi there, I have a simple submit button with the word "Search!" as the value. However, in FF, it is appearing aligned nearer the bottom of the button where as in IE it is centered correctly. This is what I mean: This is my CSS: PHP Code: .search_button{ background: url("images/search.jpg") repeat-x; border: 0px solid ; font-family: verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; width: 80px; height: 24px; font-weight: bold; vertical-align:middle; } and my HTML: PHP Code: <input name="" type="submit" value="Search!" class="search_button"/> Any ideas why this is and how I can center it in FF? Hello, I have a <h2> header consisting of "Contacts". I want an add button to the right of the header. The add button should be an 32 px image which changes upon hover, and the words "new" below the image. The image "new.png" is 32 px wide and 64 px high, and consists of the two images on top of each other. The following code is close but not perfect, and have several questions: How should I push the text under the image? Should the anchor go inside of the h2 tag? Any other improvements? Thank you Code: <style type="text/css">
a.button{
background-repeat: no-repeat;
background-position: 100% 0px;
height: 24px;
width: 24px;
margin: 0 0 10px 0;
padding: 4px;
}
a.button:hover{background-position: 100% -32px;}
.icon-32-new { background-image: url(new.png); }
</style>
<h2>Contacts
<a href="index.php?page=add_contact" class="button icon-32-new">New</a></h2>
I am on a web site which allows the user to customize certain aspects of your pages. The site inserts a search button with the title "Go" inside a form. I'd like to change the text to "Search". I have no way to access the xhtml because the site inserts it into the page and I can't replace the form with one of my own because non site generated forms are not allowed due to security; however, we can modify the button in question since lines like this work: Puts image behind button: .productSearchCell button {background: url("http://url");} Removes button: .productSearchCell button {display:none;} 1. Can I change the text from "Go" to "Search" using a css override? OR 2. Can I get rid of the text altogether and instead place an image on top of the button with a CSS overide? The background code above places the image behind the button instead of on top of it. OR 3. Make the site's generic button invisible and use my own image button to trigger the form inserted by the site. I really would like to use this method, but it has to be a CSS override as we can't touch the use the form tag in the xhtml section of code we can edit. Code: <div class="productSearchCell"> <div class="hr"></div> <h3>Search this Store </h3> <div class="clearfix"> <form action="http://url"> <div> <input type="text" id="page_module0-queryInput" name="qs" value="" size="14" /><button type="submit" class="inline"><span class="buttonLeft"><span class="buttonRight">Go</span></span></button> </div> </form> </div> <a class="inlineActionLink" href="url">View all Products</a> </div> How do I align the text in my navbar vertically? I'm trying to do this. edit.... I can't post the link by adding vertical-align:middle; to my navbar tag and its not working. Do you see where i'm going wrong? Hello, I have slidedoor buttons on my website, which are enclosed inside table cells. The problem is that some of the button text a little long and when you shrink the browsers window, the text starts jumping to the next line. How do you make it so the text will always stay in one line? How to get a text aligned vertically in a css button? Hello, I've always made my menu buttons with the text built into the image but is there a better way to do it? Thanks for the help. hi all ! I want to know how I can change the text size and color for a button created inside my page (only for the button the rest should remain the same). The data and button are created in PHP so it looks something like: Code: <div class="column3">
<div class="padding">
<?php if( $this->countModules('right') ): ?>
<jdoc:include type="modules" name="right" style="xhtml" />
<?php endif; ?>
</div>
And css for that part of the page is: Code: #index .box .column3 {width:252px;}
On my sitehttp://northshorewebdesign.net/testsite/ I have a horizontal menu with text and one image link. The menu is under the slideshow. There are 4 text links and an image link. I am trying to line up the text and image horizontally. Can anyone see what I am doing wrong? Here's the code: Code: .homepage-sub-menu {float: left; width: 960px; height: 70px;overflow: hidden; position: relative; margin: 10px 0px;}
.homepage-sub-menu ul{list-style-type: none; margin: 0; padding: 0; overflow:hidden;}
.homepage-sub-menu ul li {float: left; vertical-align:middle; width: 180px;}
.homepage-sub-menu ul li a:link,a:visited {display: block; width: 180px; font-family: Calibri,Arial, Helvetica, sans-serif; padding: 10px 4px; font-size: 20px;color: #ffffff; text-decoration:none; vertical-align:middle;display:table-cell;line-height: 70px;}
.homepage-sub-menu ul li a:hover,a:active{text-decoration: underline; vertical-align:middle;}
Thank you If I spell a pseudoelement with a double colon ( :: ), example: ::first-letter (instead of :first-letter ), Internet Explorer 7 ignores the selector. Is this a bug, or is this the way CSS is supposed to work? Hi, I am trying to make my page have a double background - one picture should be repeated on X axis and one big shouldn't be repeated. My CSS file looks like this: css Code: Original - css Code html, body { min-height: 100%; height: auto; margin: 0px; padding: 0px; } body{ background-image:url(/background.jpg); background-repeat: repeat-x; background-position: center bottom; } html { background-image: url(/Pic.jpg); background-repeat: no-repeat; background-position: center bottom; }
The background(background.jpg) is displayed correctly - it's aligned to the center bottom, but the picture (Pic.jpg) is aligned to the top left corner and has height and width of the page's content. How can I fix this behavior? I have a dotted line on the right side of the left column (the blog) and a dotted line on the left side of right column (the menu). I would like a double dotted line with white space in between, so that the lines at the bottom close at the same height. How can I do this? Do I have to make a double dotted line on the right side of the blog column? Or do I have to make a third column in the middle of my blog with dotted lines on left and right side? You can find my website here and my css here Hi! I am trying to insert a nice footer menu into a CSS layout. If I set overflow to auto, I get double vertical scrollbars and a horizontal scrollbar I don't want. If I set it to hidden, I can't scroll to see content. If anyone would help me out of this scrolly mess (probably not complicated, but after a day's battling, I can't figure it out) I'd be very grateful. Just noticed that if I do allow scrolling, the footer menu doesn't scroll with the user. D'oh. Any ideas on that as well?? Code: *{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:auto}
body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;color:#000}
h1,h2,{font-family:"Century Gothic","Lucida Grande",Arial,sans-serif;font-size:40px}
a{text-decoration:none;color:#000;outline:0}
#menu{position:absolute;bottom:20px;left:141px;z-index:80;width:100%;line-height:12px;}
#menu div{height:66px;background:#808000;filter:alpha(opacity=60);padding:7px 0 0 7px;}
h1 {position:relative;left:-141px;margin-bottom:-73px;width:140px;opacity:0.99}
h1 a{padding:51px 10px 10px 0;color:white;background:#808000 url(go.gif) 0 -30px repeat-x;font-size:11px;text-align:right;display:block}
h1 a:hover{background:#808000 url(go.gif) 0 43px repeat-x;;color:red}
li.grass {height:12px;padding:0 5px;font-weight:bold;color:#999;display:block}
li.grass a {height:12px;padding:0 5px;font-weight:bold;color:white;display:block}
li.grass a:hover {height:12px;padding:0 5px;font-weight:bold;color:red;display:block}
#atlogoL {position:absolute;top:3px;left:10px;z-index:100}
#atlogo {position:absolute;top:3px;right:10px;z-index:100}
#lena {position:absolute;top:10%;right:20%}
#lena2 {position:absolute;top:2%;left:38%; z-index:100}
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
background: url(images/stripe.png) repeat;
}
p {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: white;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#main-content {
background: url(images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;
}
#header {
background: #267f23;
text-align: center;
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #267f23;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Perfect Fluid Width Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" media="screen" type="text/css" href="slimmed.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
</div>
<div id="left-sidebar">
<p>Ii </p>
</div>
<div id="main-content">
<h2>Why is this layout "perfect"?</h2>
<ul>
<li>Works in all major browsers</li>
</ul>
<br /><br />
<p>
Litterarum
</p>
<p>
Hendrerit
</p>
<p>
In
</p>
<p>
Ut
</p>
<p>
Videntur
</p>
</div>
<div style="clear: both;"></div>
<div id="footer">
<p>Footer stuff.</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="menu">
<h1><a href="index.html">BOB</a></h1>
<div>
<ul>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
</ul>
</div>
</body>
</html>
Hello. I'm trying to create a link that spans the entire page horizontally with two different styles of text, each justified around a center margin (the text on the left being right justified, and the text on the right being left justified). I know I could set up two div's and justify the text accordingly, but I think that would separate the links when they need to remain one. Here is what I'm trying to accomplish: (I'm sorry, I'm trying to include a URL to an image, but it keeps blocking my link. No image.) So far I've got the link set up with the styles and hovers working exactly how I want, but the justification is not there. Any ideas? I have painted myself into a corner, and it's time to paint myself out...Hopefully with help from someone here! For the images on my website, I have added a two color border around every image (in Photoshop)...A 1-pixel green border (#6e888f) on the outside of the image, and then a 1 pixel white border just inside that. See example he mableyhandler dot com As I add more and more images to the site, it is getting harder to keep up with adding the border in Photoshop every time. Is there a (semi-easy) way to do this in HTML? OR maybe in CSS? The challenge is that it needs to be a double border...And, it needs to be a permanent design element (the image is clickable, but the border colors should not change on rollover). Thanks very much Hiya, So what I'm trying to do is have a base image used as a background that sits on the left side, and then another image to be used to tile across the rest of the page from where the first one left off. I'm not really sure how/if you can easily do something like that, and I can't seem to find anything when I'm searching. And when its all said and done, text would still go over both images as if it was one image. Thanks, -Sky Due to letter-spacing double break won't work in IE. And triple break works as it is double break. How to solve this problem? |
|||||||