I'm running into some positioning inconsistencies between browsers. I'm trying to position a submit button so that it hovers over the lower corner of the textarea.
In Chrome, Safari, and other browsers this works just like it should:
However, in Firefox, I get this:
Is there a different method for positioning that element, or have I left something out of my CSS?
Here is the link to the HTMl and the CSS: http://www.tylonius.com/clients/X10/GalleryDisplay.html
Position that submit button absolutely.
position: absolute;
bottom: 0;
right: 0;
Make sure it's parent element's position is set to relative.
I just dropped that screenshot into photoshop and measured the bottom padding of the containing element. In the top image it's 11px high. In the bottom image it is 13px. I'm guessing that's your problem, but without seeing your code it's impossible to say for sure. Try looking at the CSS of the surrounding elements. I don't think the <input> elements are your problem.
EDIT
Now that I can see your code I'm certain this answer is correct. The problem is the length of the surrounding box. What you need to do is take the styling from #gallery-commentform and apply it to a div containing the form. then absolutely position the textarea adn the submit relative to the bottom left hand corner. that way no matter how browsers render the height/padding/yaddayadda it will always be the same distance from the bottom of the form.
I have been dealing with a lot of issues like this recently, the first thing I would do is check padding, margin, and border. I'd bet that Firefox sets some default properties differently than the other browsers, and you need to override that. The 'computed styles' tab in inspector should be enough to figure out if that's the case.
Related
I am struggling to make a webpage backwards-compatible with IE7 (I know, 'IE7?!', but that's what is on our school computers). I am trying to show a div the full size of the page to darken the body and show two specific divs on top of that. However, when I view the page, the dark div appears over all other elements on the page - even those with a higher z-index.
You can see the page here and view it in IE7 using netrender.
I have applied positioning to all of the elements and it seems to have done nothing. Maybe it is just my eyes?
I think if you pulled the modal box div out of the #wrapper div, it might work. It appears older versions of IE compare sibling z-index values, so the #blackBg div is comparing itself to the #wrapper div, which has its z-index set to auto. If the modal box was a sibling to both and had its z-index higher, it just might solve the issue.
As far as I am concerned, it is not possible so I gave up in the end.
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.
I've encountered the need for a specific sort of drop-down tooltip on hover (or sometimes click), activated either way by a small icon, say 20x20 pixels. The design would look something like this:
So, as you can see, the box that appears hovers over all other content on the page. It is variable in both width and height depending on content.
Now, as usual, the challenge is to accomplish this using only CSS. Fortunately, in this case, I'm only worried about bleeding edge browsers, and don't need to consider mobile at all. In the past, I've wimped out due to a lack of time and put the top 'pointer' element (that is centered on the icon) on the left, and put the entire box aligned to the left edge of the icon - but that's far from optimal.
I'd love any suggestions here, it'd be a fantastic solution to have in my arsenal in the future.
I think you're going to need to know the width, in order to center the box within an element smaller than itself. If you're only considering bleeding-edge browsers, the requisite JS is going to be simple and quick to write and run.
My standard centering technique for elements like this is:
.icon {position:relative;}
.popUp {position:absolute;
width:200px;
left:50%;
margin-left:-100px; /* Half the width */
}
All you would need to do to make it work would be to detect the width of your content with JS, and set the left-margin accordingly. I'm sure you could set some sensible default values for any users which happen to have JS disabled/unavailable.
I have an IE7 CSS issue. I have setup a demo in jsfiddle, but basically I have a tabbed menu setup with rounded corners on the tabs (no rounded corners shown in jsfiddle). The rounded corners are floated left and right.
Everything works great in FF and Chrome, but in IE7 the floated elements are causing the tabs to consume the entire width. I have tried numerous things, overflow: hidden, position, display, etc... but I just can't work it out!
Any help appreciated.
http://jsfiddle.net/EszSr/1/
I would just set the corner elements to display: absolute; and the containers to position: relative if needed. That should work.
Simple demo on jsFiddle: http://jsfiddle.net/ZSpjk/1/
Something that I'd try (don't have access to IE7 atm.) is, to give the tabs a width (only for IE, e.g. through a conditional comment). It could be a smaller width than you actually need, IE will "widen" it as needed for the content.
I have no idea what I'm doing wrong, but for some reason, I'm experiencing a bug with my markup that is causing my body element and my html element to not take up the entire viewport in the browser.
I can't get to the bottom of this. It first reared its head when I tried to add a 10px purple border to the top and bottom of my body.
If you inspect the page in Firebug, you you can see that there's a huge chunk of the page that is not highlighted when you hover on the html element or the body element. And the border that I applied at the bottom is hanging up very far on the page.
Does anyone know why this is? Could it have to do with my using HTML5?
Here's the page in question:
http://electricorangecreative.com/test/index.html
And here are my style sheets:
http://electricorangecreative.com/test/reset.css
http://electricorangecreative.com/test/style.css
Use a sticky footer technique.
I've had a look at the current test page and it looks like the only outstanding issue is the vertical scrollbar still appearing without need to. Easiest fix for this is to simply remove any margin or padding you have on elements you've set to height:100%. The culprit I identified is div#wrapper. Take off the padding there and the issue is resolved (in FF at least - not tested on other browsers). Since the padding is added to the height you end up with an element that stretches over 100% vertically. Use margins on children instead of padding - should be fine!