I realize there are lots of rounded buttons questions, but my needs are fairly specific, and this hasn't been answered elsewhere.
Here's my requirements:
Works with absolutely positioned buttons
Client side only techniques ( can't change HTML on server side )
Works on input type=button and input type=submit (button element not needed)
Fixed height, liquid width
Supports IE7 or better
The absolute positioning + client side only makes most rounded corner techniques unusable in my opinion.
Images or no images does not matter (either way is fine). JavaScript is allowed.
EDIT: Changed question to reflect actual problem: the one HTML element I thought I needed wasn't really the requirement.
It's not possible for IE. That's why you can't find it anywhere else. The only thing you could do is use a static background image, but that will stretch for different widths.
I ended up using multiple backgrounds for the buttons.
CSS3 multiple backgrounds for browsers that could handle that, and in IE I used the DXTransform filter to add a second image (see here). The actual technique used was a pretty standard sliding door style setup, with some changes to account for the fact that you couldn't position the second image in IE other than at the top left.
For FF 3.5 and lower I used border-radius, since multiple backgrounds only came in 3.6.
Hover/active images worked fine, and it's all in CSS, which was a bonus.
Since javascript is allowed (based on one of your comments), I don't see how it would be a big performance hit to:
wrap the input elements with div
take the positioning properties of the input and copy them to the div wrapper
remove the positioning off the input using an inline position: static
add other elements or styles to get your rounded corners. Being fixed height, then for everything other than IE7, some css like this should work (assumes fixed height of 20px, rounded end images that are 10px wide by 20px high):
Css:
div.inputWrap:before,
div.inputWrap:after {content: ' '; display: inline-block; height: 20px; width: 10px; background: url(/yourRoundedLeftEndImg.png) top left no-repeat;}
div.inputWrap:after {background: url(yourRoundedRightEndImg.png);}
Assuming your javascript gives you this html:
<div class="inputWrap"><input /></div>
You will need to style the input to get rid of borders, and such (I also found that my test in Firefox required me to set vertical-align: top, but not sure if that is necessary. For IE6-7, you would actually have to add extra div's before and after the input since they do not recognize the :before and :after pseudo-classes.
Related
CSs for rate box:
.rating-input {
font-size: 25px;
position:relative;
left:101%;
}
Button:
.custom-input-button {
text-align: center;
position:absolute;
left:64.4%;
top:12.1%;
}
image :
<img src="https://graph.facebook.com/<?php echo $user_id; ?>/picture?type=large"
style ="position:relative; top:-46px; left:0px;"/>
It gives different look in chrome and firefox:
Firefox:
In chrome bookmark menu is not open. The change in spacing is due to that?
I am frustrated changing the positions, but problem does not solved.
I agree that your not giving us enough code to really give you a good response to.
If this helps at all, when I do custom form boxes as such, I wrap them in a div to start off with. Then define my widths/heights, and do a left float. This might be a deprecated method, and there may be a better way to do it, but this has always worked for me so I still tend to do it.
That should keep your elements all at the top, then you could do a clear:both, and float your rating system to the right? Just an idea.
Just to sum up conversation in comments.
You could make resizable containers with width in %. That will make your site adjustable to screen resolutions. Make it for minimum resolution of 15" display (1024px in width). Then position elements inside those containers. You can wrap them in another node of wrappers. More wrapper divs - the less can go wrong. But you don't want them too many, ofcourse. It depends on structure of your site. Then you can set margins and size of elements in px inside those containers.
Quick example of what babbling about in upper paragraph
jsfiddle.net/Driveash/qgbLB
You can also make extra css for specific browser.
Are left and margin-left the same?
Left and margin-left could do the same thing but they are not the same. Left is for positioned element (as absolute, relative, fixed). If you don't have positioned element then you want to use margin-left.
add z-index:-999; to the image so it doesn't sit in front of the green banner
I have one "back to top" arrow almost to the footer of the website and I have a border-bottom to that div. So far everything's good, my only issue is that I'd like to remove any border around that triangle I did with CSS, no border-bottom because it looks ugly..
URL is: http://teothemes.com/wp/
I tried changing the border-bottom for the divs inside but it didn't work
As long as you as are asking for a "hack", then yes: simply add another div to your HTML, with :before and :after pseudo-elements. Move the border-bottom to these elements and give them widths that look right.
Of course, this requires an extra HTML element with no semantic value -- though wrapping all three of those content divs in another would make sense, and you could add the properties to that.
Nested or multiple pseudo-elements, if they become supported, would be a better way.
Unfortunately, just adding a bottom-border to the :before and :after styles won't work (they will still extend too far), because of the way CSS borders are rendered -- to see this make the borders thicker and of different colors. The answers to this question also illustrate this.
I'm not sure I fully understand the issue, as it looks rather simple to me.
If you were to omit the border-bottom: 1px solid #c6c5c5 style to the #backtotop div, this would remove the issue - no?
One other way would be to change the arrow element so that it is a whole image rather than the ::before and ::after elements you're doing. But then you would need to match the pattern background.
I don't see another way, especially one that would work in multiple browsers.
It appears that your Arrow is an <a> tag with a CSS background.
So far everything's good, my only issue is that I'd like to remove any
border around that triangle I did with CSS, no border-bottom because
it looks ugly..
Upon inspection in Chrome, there is no border bottom being applied to it. In fact, it's an absolutely positioned element, and so borders won't work as spacing-givers. Just adjust your top property a little bit (maybe to 6px or 9px) and your positioning should be perfected.
I want to achieve the effect described in the following question, but using CSS.
I remember seeing somewhere that this now can be done with HTML5, but now can't find the property name.
Stretching an UIImage while preserving the corners
You'll have to use 3 different images.
First, go into photoshop or Gimp or something and break the arrow image you have into 3 parts. The left side with the curve, and the right side with the arrow part. Save them as 3 different images.
Once you've got your images. Create one HTML image element:
<img src="img-middle.jpg" />
In your CSS, apply styling to the before and after pseudo-elements and add the two image bits that you don't want stretched.
img:before {
contents: '';
background: url('img-left.jpg');
height: 50px;
width: 20px;
position: absolute;
left: -20px;
}
img:after {
content: '';
background: url('img-right.jpg');
height: 50px;
width: 40px;
position: absolute;
right: -40px;
}
Make sure you change the width, height, left and right values to match the width and height of your two image files. This CSS allows these bits of the image to be added on to the left and right sides, no matter how wide the element is stretched. It's also cool since it's only one element, so the CSS stays pretty clean except for the requirement of the empty content:''; property.
So then you can stretch your middle image element dynamically. Lets say you want he arrow to stretch, have some jQuery that animates the width of the element, then the middle part will stretch and the corners will stay intact since they're technically not part of the original element, they're just appended.
ETA: As for the method described in the objective-C related post, there's no CSS property that breaks apart images like that unless it's in some obscure webkit nightly build that I've never heard of. Your option here is to break apart the other two sides. You could also combine the left and right portions of your image into a sprite and use the background-position:; CSS property to select bits of the image so that way you'd only have two image file requests, as you want to keep those low to speed up page load time.
you can create an element, assign pseudo elements to it for the left and right side caps, and use a CSS3 transition applied to the width property in order to achieve this effect.
i've set up a working demo on jsFiddle to illustrate how it's done. this demo uses background colors, but one could use images as well (repeating along the X axis for the center element).
check out the HTML5 rocks playground, you'll find some fascinating snippets demonstrating the power of CSS3 and HTML5 (naturally) and can use it as a quick reference as well.
Did you mean CSS3?
I think border-image is pretty much what you're looking for. It lets you take a single image and transform it into the border of an element.
It's kinda hard to work with, so Mozilla made a wonderful WYSIWYG editor:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator
I've got an example mht file here that will help demonstrate my issue; if you are using FF then this addon will help you view the mht file. You will prob need to download the file and view it locally since github doesn't provide the right mime type for the file.
Basically my issue is this that I have a div which is 32px in height surrounding another div which is 29px in height, and I have no idea why the former is 32px tall.. It should be 29px tall afaict.. I don't want to set height:29px tho because if you resize the window so that the nav items take two lines then the height shouldn't be 29px for either div.
So what is wrong here?
make the following changes-
(-) to make your ul and wrapper div bottoms to align change class #navigationSecondary ul.base
to have a display:table; instead of display:inline-block;
(-) to remove the 3px of blue at the bottom change class #navigationSecondary to have padding:0; as sugested by Marcel.
the use of display: inline-block; on the ul.base is the cause.
when you use that it formats an element like it were inline (it only formats the actual content of the element like a block), so ul.base will have the usual 2-3px top and bottom "padding" that a normal inline element has. It's not really padding it's the leading vertical spacing i.e. it's what gives lines enough space to provide for the ascenders and descenders of letters like g, h, p, etc.
the use of it here is to make it seem like your ul is containing the floated child list elements. To make an element contain it's floated children there are other ways to do this, one way is, on ul.base
remove: display: inline-block
add: overflow: hidden;
[UPDATED] re the tabs.. sorry I didn't see them before I started
Here's the "float everything" solution to containing child floats as it applies to your code, with some other suggestions too
.menuContainer all it needs is position:relative; and the border-right rule
.navigationSecondary float it left with a width of 100%; (you can remove z-index it's not doing anything)
.wrapper float it left with a width of 100%, remove the height
ul.base doesn't actually need anything but remove the display-inline-block.. it's not containing the child lists but there's no effect involved, if you want to you can float it left with a 100% width too
[UPDATE 2]
I just copied this to a plain HTML document and I think that just changing the DOCTYPE to an HTML4 transitional one solves the problems with no changes to the code ?? (why that should change the display be I don't quite know! - but the use of "target=_parent" is "not allowed" in Strict Doctypes so that'll be why it's not validating)
I'll put it in JSBIN so others can try it out on various browsers
I changed it to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
jsbin (with original HTML5 doctype) is here http://jsbin.comhttp://jsbin.com/agihe5/2/ - shows gap
jsbin with changed Doctype - but no changes to CSS code - with flash video to show dropdowns are working is here : http://jsbin.com/inare6/2 - no gap!
jsbin with no changes to Doctype, suggested changes to code and the flash insert to show z-index working is here: http://jsbin.com/iriya4
with the latter, code changes are detailed in the source, they have moved to the bottom of the snapshot CSS
I've tested the changed Doctype version as working in IE7, IE8, FF3.6.15, Safari4 (Win) and Chrome
Providing a test case which requires me to use Firefox and download an extension to view it is highly annoying.
I just did it anyway (purely because of the bounty), and the only change you need to make to your test case is:
On #navigationSecondary ul.base, add vertical-align: top.
The extra height is gone.
Here's a demo based on #clairesuzy's demo titled "jsbin (with original HTML5 doctype)".
(The only change was adding the aforementioned CSS rule):
http://jsbin.com/agihe5/3
The other answers may work (I didn't test them), but (providing I've understood the issue properly), this is by far the easiest fix.
Apparently #navigationSecondary has padding:0 0 3px; set in unnamed-1.css on line 2.
Everything inside ul.base has a height of 24px. Itself has a padding of 2px. So it's height is 26px. It's parent div.wrapper has a height of 29px, 3px extra. It's not caused by the 3px padding of div#navigationSecondary. Nothing is contributing the extra 3px so I'm suspecting a float issue. Anyway I managed to fix it by floating 2 divs.
Add float: left; width: 100%; to div.wrapper and div#navigationSecondary.
Remove display: inline-block; from ul.base.
Floating div.wrapper and div#navigationSecondary collapses them to their nearest floated child element, in this case li.base, and removes the extra 3px. 100% width brings back the stretch.
Hope this helps.
<body style="zoom:0.99; -moz-transform: scale(0.99); -moz-transform-origin: 0 0;">
adjust accordingly, and change hight and width around
Of course. This is simple. A very elementary element positioning issue.
inline-block default vertical-positioning
ul.base is an inline-block. which means that it has spacing calculated like a block, but positioned like an inline-element.
The default positioning of inline-element is to align on the baseline of text. However, text goes below the baseline for letters such as g, j, q etc. This is called "descenders".
The height of a box is always from the top of the font to the bottom of the descenders.
The wrapper takes on the height of its children. Which means that the inline-block ul.base, positioned on the baseline.
Your font at that particular size happens to have a 3-pixel descender. Voila. Your mysterious 3-pixel gap is merely the text's descenders. And your inline-block element is positioned on the baseline (i.e. on top of that 3 pixels).
Tests to confirm that this is right
Change font size. You'll see that 3-pixel changes. Change font size to small enough and it'll reduce to a 1px descender. Your so-called "gap" will shrink.
Change ul.base to something other than an inline-block (of course you have to add something to clear the floats inside). It will no longer have the 3 pixels at the bottom because a non-inline element is not positioned on the baseline.
Position ul.base on the absolute bottom instead of the default (baseline). That 3-pixel gap disappears. Use this CSS rule: vertical-align:bottom
Morale of the story
You always have to be careful with baseline positioning whenever you use inline-block display style.
Off topic
Handling font descenders is especially frustrating with Asian languages. As you know, CJK languages do not have characters that go below the baseline. However, they are typically placed on the baseline (so that they can inter-mix with other European languages, which have descenders). However, when one places a block of text with a background containing only Asian characters, the text will look like it is moved to the top, with an ugly empty gap on the bottom (the descender).
For example, if I make a block of four images that are absolutely positioned with 50% width and 50% height, the result in Internet Explorer looks like this:
http://img716.imageshack.us/img716/8376/96774641.png
The images are placed right next to each-other, as would be expected.
But the same code in Chrome produces this:
http://img560.imageshack.us/img560/7976/chrome.png
The images are shrunken slightely to make room for the spacing in-between.
My styles already include:
border-style: none;
border-width: 0;
padding: 0;
margin: 0;
... so why is Chrome spacing my images apart from each-other, and how can I fix it without altering the display for other browsers that render correctly in the first place?
EDIT: <link removed>
Be aware that the actual page is much more complicated, with over 1,000 <img> elements.
It will load slowly in any browser that is not hardware accelerated.
I have confirmed that FireFox renders it identically to IE8, with the images next to each-other as they should be.
This could be a rounding issue: A width of 50% may well end up as 223.5px for example.
Seeing as you're using images with a fixed size, why not specify the positions in pixels as well?
Are you using a CSS reset? Browser default styles can cause irritating problems like paragraphs with differnt top margin heights or other quirks of layout. This particular case may not be fixed with a CSS reset, but it would eliminate the possibility.
Sadly, the CSS3 option to set a background image scale is not yet available in any reliable way, or you could set the image as a repeating background image scaled to 50%, which of course would have no gaps. That won't be an optin for quite some time, most likely.
Have you tried using the Inspector (right-click on the image, select Inspect element) to trace where that spacing is coming from?