I have this simple code:
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#000000">
</body>
</html>
Questions
Why I am getting html height 8px in Chrome and Firefox? HTML height should be auto (0px).
The body height is 0px, so why is the background color (black) filling the whole screen?
Before I answer your questions let me tell you that even browsers have their default CSS style which is applied to every webpage! (To give you more insight let's say these default styles are the reason why normal HTML Buttons appear differently in Chrome, Firefox and IE)
Now for your first question: As per browser's default CSS HTML has padding of 4px! That's why you are getting HTML height 8px.
Now you must be wondering how to get rid of them? So for that we can use Normalize CSS
Now for your second question: you can say BODY is the special case tag which has a exceptional way of rendering it's background! (Or say it's not like a normal DIV tag)
In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.
You can read more about it here
Hope you found your answers.
You have a line break:
<body bgcolor="#000000">
^---- here
</body>
which gets rendered as a space character, causing you to have an implicit single line of text in your page.
If you look at the page using Chrome devtools, you'll see that the 8px height is coming from the user-agent stylesheet; that is, browsers apply their own default styles.
One common technique to wipe this away and start from a 'clean slate' is to use one of the many css reset libs.
See here for some options.
You are getting margin as 8px, not the height. Each browser has some default settings that's why you are seeing that. Check out the default settings for each browser using the below links:
Firefox
Webkit
IE
Related
Attempting to have three backgrounds with various z indices is resulting in only one layer being shown.
This jsfiddle has the relevant code and examples (minus the huge foundation css file... the behaviour is unaltered without it).
the classes that are failing are
skyline
and
#footer_container
whereas #header_container is running properly.
I've updated your fiddle here.
#footer-container wasn't displaying its background image because of your CSS syntax. Since you combined both the background image URL and no-repeat, you would need to use the background shorthand rather than the background-image property.
A great way to check this sort of thing is to inspect your element with your browser (in Chrome: Right Click > Inspect Element) and find the element that isn't displaying properly. You'd notice that the background image property of your #footer-container div was being literally crossed out by Chrome because of a syntax error.
There was also a bit of a syntax problem in your .skyline class. First, both your body and the inner div have a class of .skyline. This is kind of confusing so you should remove it or be more specific in your CSS, e.g. with p.skyline, div.skyline, etc. As you've got it currently written, both your body and that .skyline div will get the background image. You also didn't include a closing </body> tag. I'm assuming you don't want the background image on both that div and the body, so I removed your body tag in the updated fiddle.
Also, in your .skyline css, you have both height: 546 and height: auto. First of all, height in CSS should have a specific value (e.g. px, em, %). For an <img src="img.jpg" height="546" />, however, simply putting "546" as its height would be fine. Second, you should only have one height value per class.
The skyline problem itself is that you didn't close your curly bracket on line 126, so no styling at all was applied to .skyline. Once it's closed, there's still a problem. It has no width. So let's set it to 100%. Still nada. This is because .skyline's parent div#container also is widthless. So let's toss a 100% width at it too. Then we're in business.
A good text editor that highlights syntax errors could help you out a bunch, especially when you're just starting out.
I have a navbar on my bootstrap3.0 website that works almost perfectly. On large screens, the navbar is fixed to the top. On smaller screens, it is still fixed to the top and the menu shrinks to that little "hamburger icon" for drop down menu on a mobile screen.
However, there is a problem I cannot seem to fix. When the website is viewed on a narrow/mobile screen, bootstrap magically adds the following to my page:
<html lang="en" style="padding-top: 59px;">
I have tried putting setting the html and the body margin to 0 and padding to 0 in my css, the bootstrap css, and even as a style in the index.html page, but this element.style seems to overrides it. I've also searched all my css files, and the 59px magic number appears nowhere, which implies it is calculated on the fly from some variable. I don't know enough about bootstrap or css/less to figure out how/why - which is why i said it is "magically" added :)
Where is it calculating the 59px from, and how can I over-ride this?
I can't tell you where it's coming from but you can override it with your own style by adding !important to the end of the defintion. Embedded styles using the style tag will take precedence over other definitions otherwise.
.someClass{
padding-top : 0px !important;
}
I really don't have any reference, neither a sample code (searched in Google & SO).
Maybe just haven't found the right keywords.
I believe this can/must be solved with CSS, but my skills with it are minimal...
That said:
I want to "crop" a number of pixels of an iframe.
Top and the bottom at first, but, hey, if I'm gonna ask, left and right too :o)
[update]
What I'd really is a "proof of concept" or at least a starting code to play with...
[concept proven, as per David's answer]
<!DOCTYPE html>
<html>
<head><title>iframe cropping</title>
<style type="text/css">
<!--
#iframeparent{width:700px;height:700px;}
iframe{margin-top:-40px;width:700px;height:700px;overflow:hidden;border:0px;}
#iframe-crop{position:absolute;top:0;left:0;border-top:55px solid white;width:710px;height:640px;pointer-events:none;}
-->
</style>
</head>
<body>
<div id="iframeparent">
<iframe src="http://docs.google.com/viewer?url=http://www.startupgreece.gov.gr/sites/default/files/geek_agreement_v1.2.pdf"></iframe>
<div id="iframe-crop"></div>
</div>
</body>
</html>
I would put a block with a white (or whatever the site's background color) border directly on top of the iframe, and adjust the size of each border based on how much you want to crop. Easiest way to do that would be to put the iframe in a parent element that is positioned relatively (or not static, anyway), then have your block with the cropping border inside that parent element as well, positioned absolutely at top: 0 and left: 0. The cropping block would have to be made the same size as the iframe (does your iframe have a dedicated size?).
Edit: just tried it, and I found out (duh!) that this disables all interactivity with the iframe, because the cropping overlay "absorbs" all events. If that's fine with you, good. If not, you can try the CSS property pointer-events:none;, however this won't work in all browsers. It works in the latest versions of Firefox, Chrome, and IE, but not everyone uses the latest versions of everything.
Demo: http://www.dstrout.net/pub/iframe-crop.htm
Please go to: http://jlecologia.com/page1c.html to see the problem
The top box look fine but in IE6 there is a double top and bottom border.
can somebody point me ut what i have done wrong ?
Or can anybody tell me a javascript rounded box that accept to do that effect with the border that is unequal. I have test some and they all fail, so i have done the picture round box but i like the jQuery javascript approach better.
Take a look at the JQuery's round corner plugin
And here is a demo
The default for background images to to have them repeat.
Try: background: transparent url(../images/roundbox-top.jpg) 0 0 no-repeat;
Edited after comment to provide full solution:
IE6 sets the height of empty divs to your font-size if the height specified in the css is less than the font-size.
On #roundbox .top and #roundbox .bottom, put
font-size:0;
line-height:0;
That will collapse the div to the right height.
In addition to the change you've made for the bottom border, setting the font-size of the element with class "top" to 7px fixes it in my IE6.
Try using the web developer toolbar in Firefox to validate the CSS and HTML. I did a quick check and there are multiple errors in each. The rendering difference, I suspect, is because IE does not handle malformed content as well as FF. In particular, even small errors in CSS files tend to snowball in IE and melt down an otherwise good layout. Not sure if IE7 and IE8 have made any improvements in this regard.
(clickable)
Mainad has a valid height and width, however it isn't shown like subad1/subad2. Which are in essence exactly the same! (just a different background image).
Firebug shows my div as greyed out for some weird reason. Replacing the contents of mainad with just some text doesn't solve the problem (problem isn't related to inner elements)..
What's going on?! :(
Do you have AdBlock installed? That might be hiding that div.
An extra little note: FireBug will actually show something like this in the Style pane when AdBlock Plus is blocking it (wrapped for clarity):
.mainad, #mainad { undefined (line 233)
-moz-binding:url(chrome://global/content/bindings/
general.xml?abphit:707307897865#basecontrol) !important;
}
Firebug displays selectors without HTML content, or block element styles as gray. If you edit the HTML, and add some copy you will see the selector regain its colors.