This isn't a major issue as it can easily be tweaked with a bit of css - just something I'm interested to know. Why does the border appear within the height of a button element instead of outside, as per box model? In the example below I have a button element and an anchor element. Both height 30px, with a 1px border. However the button element appears 2px shoter than anchor (which displays correctly at total height 32px).
http://jsfiddle.net/Y9Rv7/1/
Thanks
Adding this to the style should resolve your problem
box-sizing: content-box
This will cause the element to render as you want. I believe that by default buttons render with the border-box behaviour wich causes padding and borders to be added inside the box.
Related
Preparing a website navbar, I thought of creating hover effects over tab like Android does it, i.e. a top border displays over a tab when you hover over the tab.
The problem is, these navbar tabs are nested in a container div, and for some reason, the navbar tabs have a slight margin, even though I haven't specified one explicitly. So, the top border which I want, is not perfectly aligned to the top of the window.
I tried the ususal workarounds: setting font-size:0 in the parent, using vertical-align:top and margin-top:-4px, but non of those seem to work perfect.
Here's the jsfiddle: http://jsfiddle.net/A3nEq/
Notice a thin black line between the absolute top and the white top border. I have to get rid of that!
You have to remove border: 2px solid transparent; from your #headContainer div.
Demo: http://jsfiddle.net/A3nEq/1/
Remove the border from #headContainer.
I have a simple error, below is the adress you can visit to see the issue at hand.
Why is parts of the header white? It's set to be a light shade of green, and to it should be placed the the very top (beneath the topmenu) and after that the 60px margin-top on #menu should push it down into it's correct position and making the entire area green.
This is what isn't happening, and I cannot for the life of me understand why. I removed the margin-top and it only pushed the div up, but how can I then place the menu in it's correct position ( I should add that the menu with login etc, is placed correctly but it's just that unknown white gap that's the problem)
-- Removed Adress as solved
The margin-top that you're adding to #menu is what is causing that gap.
just add an top margin to your #wrapper
position: fixed
sets your element on a fixed position with the standard behaviour for other elements to ignore this element anymore in fact your fixed element will overlay everything else, because it's not bound anymore to other elements and all elements after your fixed box will ignore the bounding box.
The content_background element has CSS property padding-top set to 10px. Remove that and it should be OK.
For some odd reason, when I set a font-size:0px; in my style-sheet for an anchor link, IE7 still shows a tiny-tiny version of the text. Is there anything I should consider doing to completely hide the text, without using text-indent?
The anchor itself is using a background image in the css. And I simply want to hide the text that in the anchor link, on the HTML page.
visibility: hidden and display: none are the standards in hiding elements.
The difference between the two is that visibility acts like opacity, in which the element is hidden but it still affects the layout of the page (e.g. a 200px high element will still make the element below it 200px lower than if it were not there).
display acts as if the element were not there at all - a 200px high element would not make an element below it 200px lower that it would be if the first element were not there.
Summary:
Thus, if you want to hide the text and leave a blank space in its place, use visibility: hidden. If you want to hide the text and have it act as if it were not there at all, use display: none
I would recommend you to create a separate class for the text and set
visibility:hidden;
for that class.
Ah, yet another CSS issue I'm having.
I'm attempting to use custom buttons, replacing a LinkButton with an image. I have the button working, but now the content below the button is not being pushed down. Have tried various things, but can't seem to find the answer.
Here's a jFiddle: http://jsfiddle.net/3hm5W/
Basically, the div id = sampleForm (the white form box) should start 5px after the div class = action-buttons. Currently the white box contains the red button.
All of the contents of your action-buttons are being absolutely positioned, which takes them out of the normal flow and makes the container have 0 height. Either get rid of the absolute positioning, or specify a height for your action-buttons div.
I have a fixed-width page that I want to add a simple border to with the Border CSS command. However, I don't want this border to balloon the page and cause smaller screens to have a horizontal scrollbar. I'm not too great with CSS, but I know enough that I looked into using negative margins to offset the border's width since I had already done something similar to add borders to other elements that I don't want moving. But when I do so on my main container div, everything gets thrown off-center and smashed up to the left side of the page. I'm using the Blueprint CSS framework and I figured there was something in there that was messing with my margins, and I found the main container is applied a "Margin: 0 auto;" to center it on the page.
So, I ask now, how the hell can I apply a negative-margin border to a page while still centering the layout on-screen? I've tried to wrap the container in a div and apply the border and negative-margin to it, but no dice, I tried nesting a div inside the container and applying the border to the container, but that went badly as well. Somebody throw me a bone here!
If the negative margin is working, you can get the centering back by adding a wrapper div with a fixed width and margin: 0 auto.
In my testing, the negative margin didn't change the width of the box. A few other strategies:
Adjust the width of your div to offset the width added by the borders.
Add a background image to the div that simulates left and right borders.
Use JavaScript to detect the width of the window and remove the border when necessary.
Add body { overflow-x: hidden } to suppress the horizontal scrollbar.
Use a CSS3 media query to add the border only when there's enough room (optionally falling back to JavaScript (see #3) for older browsers).
Update: Instead of negative margins, you can probably use box-sizing: border-box so that the border doesn't add to the element's width in the first place.