I have a page with elements on it, a ton of them, and one of them is inside a couple divs. the one i wasnt to target has certain styles i want attributed to it, when i style inline on the page itself, the styles work, but when i link to the stylesheet it doesnt change the style to how i want it. im not sure why, thanks for your help.
Here is my inline code:
profile_pic_box {
float:left;
border:#999 2px solid;
width:100px;
height:100px;
margin:0px 0px 0px 0px;
overflow-y:hidden;
}
This works fine when i have it on the page that the element is contained on, but when I remove the code and place it on a style sheet, which is linked correctly, it doesn't work. Here is what I have in a stylesheet:
style.css:
#profile_pic_box {
float:left;
border:#999 2px solid;
width:100px;
height:100px;
margin:0px 0px 0px 0px;
overflow-y:hidden;
}
Here is some HTML:
<div id="profile_pic_box">
And here is the stylesheet link, which does work.
<link rel="stylesheet" href="style/style.css">
Probably one of the following:
Your browser is caching the old style.css file. Try disabling cache in developer tools or open the website in an incognito tab.
You're adding your CSS before another CSS that's possibly overwriting it. In-line works because it is at an higher level.
Not sure if you're running it on a server or not, but you also could try adding a slash at the beginning of your href like this:
href="/style/style.css"
#profile_pic_box {
float:left;
border:#999 2px solid;
width:100px;
height:100px;
margin:0px 0px 0px 0px;
overflow-y:hidden;
}
<link rel="stylesheet" href="style/style.css">
<div id="profile_pic_box">
Related
I want to publish some in table where the table td widths, BG colours are different. I designed the following css which is working fine in Chrome and Fire fox but not giving required out-put in Internet explorer. Can any body help me in this regard.
HTML:
<td class="td_1">Games</td>
<td class="td_2">Sports</td>
CSS:
.td_1 {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
background-color: yellow;
color: red;
}
.td_2 {
width:300px;
height:50px;
max-width:300px;
min-width:300px;
max-height:50px;
min-height:50px;
background-color: blue;
color: white;
}
there is no way in the world you would get wrong color. please see that your Internet Explorer's user-agent styles dont override your stylesheet. try using a reset.css sheet to reset all IE's default values.
include the reset.css first before all other stylesheets. you can get a free one Here
I am learning HTML and CSS, and I want to create a fixed-width page which has a silver background color. I also want the background color outside of the fixed-width area to be black.
The problem is that there is a small black gap above the fixed-width area (above the heading), and I would like to remove this black gap, so that it's replaced with silver color.
How do I solve this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<h1>Welcome to my homepage.</h1>
<p>This is just a test.</p>
</div>
</body>
</html>
CSS:
body {background-color: #000000;}
.main {
width: 640px;
margin: 0 auto;
background-color: silver;
}
try
body {padding:0; margin:0; background-color:#000; }
try:
border-width:0px;
border and margin are two different things... here's a nice picture for you:
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
You can do below:
body {margin:0; padding: 0; background-color:#000; }
.main {
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
background-color: silver;
}
problems like this one will be quite common when writing HTML & CSS, it is a hotly debated subject but I would strongly recommend you use a reset style sheet.
All browsers have their own set of rules as to how elements are displayed on a webpage, a reset style sheet goes a very long way to minimise the effect of browser specific style meaning your code reads much more logically and it easier to spot what is going on especially when you have a problem. That said, even with a reset style sheet you should always cross browser check a project as there are always quirks.
Here is one of the most widely used reset style sheets.
http://meyerweb.com/eric/tools/css/reset/
Just paste this above your website CSS on your style.css sheet or create a new stylesheet called reset.css and reference it BEFORE your site.css.
I'm having this weird problem with this website I just started building. I want to get the header to align completely flush with the top of the page. But for some reason, there's a small space, about 20px high, that won't go away no matter what I try. I'm assuming there's just something about CSS and html that I'm not getting so can you guys help me out?
CSS:
#header {
background-color:#3429C9;
/*-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;*/
display:block;
position:relative;
z-index:2;
margin-top:-20px;
border-bottom:2px solid white;
margin-bottom:20px;
height:60px;
}
body {
text-align:center;
font-family: Georgia, Serif;
background: #000000;
margin:0;
height:100px;
display:block;
border:2px solid red;
}
Every browser (firefox,chrome,IE) have a default CSS it comes with which give default styling to elements. It also gives some default margin/padding, so usually when starting a web site design you should use a css reset file to reset all default styling.
That way you get the same basic behaviour for all browsers.
For a quick solution to yuor problem, just set the header padding/margin to 0.
I have tried to create an anchor point using:
<a href="index-xxx.html#reference-name"> and
<a name="reference-name">
The problem is I have a floating margin on the top and the anchor point goes to the top of the page hiding the top of the text.
Is there an easy way to add a relative spacing to the top margin using HTML?
I'm new to this and using a template that I found online. I have since found that it would have been easier to start from fresh instead of using the template but I am too far down the line now, and I don't really understand how to change the CSS to do this. Is there an easier answer?
Many thanks in advance to someone that has been searching for hours for the answer.
EDIT: I've updated based upon the code supplied.
Basically we've got something to the effect of this:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#main {
min-width: 980px;
margin: 0 auto;
font-size: 0.75em;
padding:101px 0 37px 0;
}
header {
height:101px;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
position:fixed;
top:0;
left:0;
width:100%;
z-index:100;
}
footer {
overflow: hidden;
position:absolute;
bottom:0;
left:0;
width:100%/*; height:37px*/;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
color:#9d9d9d;
text-transform:uppercase
}
</style>
</head>
<body>
<div id="main">
<header>...</header>
<section id="content">... with <a name="blah">anchor</a> a couple paragraphs down the page</section>
<footer>...</footer>
</div>
</body>
</html>
As written the anchors links are buried under the top navigation. It seems the only solid fix is to use 'CSS frames' to get the content to display correctly, which requires the following CSS tweaks:
#main
{
padding:0 0 37px 0;
}
section#content
{
position:fixed;
top:101px;
width:100%;
bottom:37px;
overflow:auto;
}
footer
{
position:fixed;
height:37px;
}
So I've removed the top padding from #main.
Then I made the content and footer fixed position. Because of this the content has to be moved down 101px, hence the top.
I then had to give the footer a height, and then put that same amount as a bottom on the content.
Overflow auto gives us scrollbars, and width of 100% puts those bars in a reasonable place.
Tested on IE 9, Chrome 10, Firefox 4, and Opera 11.
Edit 2: And unfortunately I can't find much online about this particular method. Eric Meyer talks about it in Smashing CSS. It doesn't look like any of the existing resources online test for how anchor links will work with the content, which is pretty unfortunate.
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<style>
#boxTop{
margin-bottom:20px;
border:1px solid green;
}
#box1{
float:left;
border:1px solid blue;
}
#box2{
clear:both;
border:1px solid red;
}
</style>
</HEAD>
<BODY>
<div id="boxTop">test</div>
<div id="box1">test</div>
<div id="box2">bottom</div>
</BODY>
</HTML>
check it here
in IE,why has a padding in #box1 and #box2 ? how to fix it?
What you've come across is the IE hasLayout "feature".
Getting #box2 to have layout will fix this issue. If you are concerned with IE7, add min-height: 0; to the style for #box2, like so: http://jsfiddle.net/VTmes/
UPDATE:
There also seems to be a big with the first element on the page having a margin. I tried to remove the margin-bottom and add a margin-top to the box1 and it works. Have a look here: http://jsbin.com/uqide3/6
ORIGINAL ANSWER:
Different browsers have different default margins and paddings. Reset this at the top of your CSS and you should not have these differences.
The simplest but not very efficient reset is:
* { margin:0; padding:0 } /* '*' affects everything (all elements) */
One I've been using recently is:
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,div { margin:0; padding:0 }
Google 'CSS Reset' and you should see many variations, some claiming to be better than others. My take is use the minimum that works for you.
One other approach is to not use one at all, and just set the properties you need as you polish your design. Read this for a deatailed explanation: http://snook.ca/archives/html_and_css/no_css_reset/
float:left
property seems to be problem in IE. Even though we set margin and padding to 0, still rendering is not as expected in IE. Try to use span instead of possible in place of 2nd div and remove float:left property.