When I use the folowing CSS code on Firefox, I get a gap between the banner and the top of the screen. How can I avoid this?
#container1
{
position:absolute;
left: 0px;
right: 0px;
width: 1000px;
height: 255px;
margin: 0;
}
#logo1 {
background:#FFFFFF;
margin: 0;
border: 1px solid red;
position:absolute;
left: 0px;
top: 0px;
width: 200px;
height: 250px;
}
#Banner1 {
background: #1071A6;
position:absolute;
left: 200px;
top: 0px;
width: 789px;
height: 250px;
vertical-align:top;
margin: 0; border: 1px solid red;
}
body{margin:0 padding:0;}
should do the trick.
a gap between the banner and the top of the screen
Have you set the body's margin and padding to 0 as well?
I would recommend using a reset stylesheet like this for every design you do. It guarantees a clean slate on every browser. Any changes you make will look pretty much the same in every browser after using a reset, so you can avoid problems like these.
Use a reset stylesheet to set all default values to 0 in all browser. Make sure this is the first stylesheet in order, if you have problems after applying the stylesheet then it'll make it much easier to fix.
Related
#container {
background-color: grey;
top: 40px;
left: 50px;
width: 500px;
height: 400px;
position: absolute;
border: 2px solid black;
}
I have a single div tag in the body with this id. Nothing else. Lets say the top-left vertex of this container displays in the browser at location x,y. Now when I change the position property to relative, ironically it displays at a location ~(x+10, y+10). Why does this happen?
Did you, by any chance, remove the default margin from the body? It's likely the default margin applied by most browsers.
Try adding this:
body { margin: 0; padding: 0; }
Fiddle: http://jsfiddle.net/5TZBf/
It's because of the default margins on the page a simple reset can be done. Fiddle
*{
padding:0;
margin: 0;
}
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.
Apparently, elements with position:absolute nested in a span with position:relative render differently in Firefox and Chrome. I have two such elements in a span with position:relative that I need to overlay and the problem is that I can't overlay them in both Chrome and Firefox.
Here are images describing the issue:
Firefox
Chrome
CSS:
.csv-upload-btn{
position:relative;
margin: 0 0 10px 4px;
height:20px;
width: 54px;
#id_uploaded_file {
position:absolute;
z-index:2;
opacity:0;
height: 16px;
width: 47px;
}
.upload-btn {
background: url(images/btn-upload-bg.png) repeat-x 0 0;
position: absolute;
padding: 0 5px;
border-radius: 3px;
color: #fff;
width:47px;
}
}
EDIT: I understand this isn't a lot to go on, but unfortunately, this is all I can legally share. Any ideas and suggestions would be appreciated. I will provide more details if/when I can get a hold of my partner
Set your #id_uploaded_file to top: 0, left: 0. It is absolutely positioned but you haven't specified the position.
#id_uploaded_file {
position:absolute;
top: 0;
left: 0;
z-index:2;
opacity:0;
height: 16px;
width: 47px;
}
HTH.
Im very new to css and I still find hard to understand some concepts especially positioning.
Anyway, my problem is that my when I set position: relative; of the container and my footer position: absolute;
bottom: 0; the footer became small. It had the same width as the container which is supposed to be before I placed those codes. I did it because I want my footer to be at the most bottom part of the container.
Below is the screen shot:
The maroon is the footer.
In my footer I don't use div but instead I use html element <footer>.
My css codes:
div#container {
height: 100%;
width: 1000px;
margin: auto;
background-color: #C9C9C9;
position: relative;
}
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
Please help.
Add width: 1000px; to your footer
Check this, if that may help you
https://developer.mozilla.org/samples/cssref/css-positioning.html
i will also encourage, you to have firebug installed in your browser
Also above the footer, add some div container, give it some height.. so that footer will stay at bottom. don't use positioning explicitly... since you are new to this.
Get yourself some time, you will be there on top of it..with CSS position :- )
Is it necessary for you to use relative and absolute positioning ? I'm asking since it has one drawback which is that the layout of the page will not be the same as always for all the different sizes of the screen.
Since you wanted to display footer at the bottom of the container, so here it can be done in this way.
<style type='text/css'>
body{
margin: 0px;
padding: 0px;
background-color: black;
}
#inbody{ /* main page */
padding-top: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-bottom: 10px;
height: 1170px;
}
#container{ /*container */
padding: 10px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
height: 1130px;
background-color: orange;
}
#header{ /* header */
margin-left: 168px;
height: 51px;
}
#midbody{ /* middle body */
margin: 10px;
padding: 0px;
height: 999px;
}
#footer{ /* footer */
padding: 10px;
height: 30px;
background-color: black;
}
</style>
Moreover you can change colors of every part to see the changes. Also use inspect element which shows the HTML and CSS of the web page. Also for the box model concept try experimenting the metrics in the inspect element.
You are using;
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
If footer is some ID or Class, it should be defined in CSS like #footer or .footer and no problem if you are using html5 element footer.
If you want to stretch an element to fill container, use width: 100%. Add this to your footer if footer is inside your container. Otherwise it will stretch to screen.
I properly solved it by declaring width of footer to 980px; When I tried 1000px it became wider than the container because after researching I found out that mozilla and webkit doesn't include padding in the width.
I am having some problems with my DIV, it wont display over a a DIV that has a web user control in it. Below you can find my css. I believe I have done everything right and am hoping that someone can maybe see an error that I have made and help me out. If you need any other code let me know. I also wonder if its just IE rendering it wrong? Thanks for looking.
The Popup CSS:
{
background: #ececec;
position:absolute;
top: 236px;
left: 201px;
height: auto;
width: 280px;
border: solid 1px gray;
z-index: 50;
text-align:left;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 15px;
font-size: 8pt;
}
The Activity DIV (same the div above just changed position)
{
border: solid 2px #A9C5EB;
position: absolute;
top: 353px;
left: 290px;
width: 710px;
height: 227px;
font-size: small;
overflow: scroll;
overflow-x: hidden;
background-color: #F8FBFE;
z-index: 2;
}
To know the HTML is essential to fix your problem.
What is the html that contains your popup? Is it relative to the body tag or some other element? Is the containing element position: relative;?
Try setting the containing element's z-index and position:
#my-container {
position: relative;
z-index: 1;
}
See this SO post about absolute positioning.
On a side note, check out IE-7.js which fixes many IE browser issues, including - AFAIK - this bug.