I've got a strange 1px line that appears at the bottom of my page, but only in mobile. It does not do this on desktop. The footer for some reason is adding an extra 1px line at the bottom of the page in mobile, but, again, not on desktop even though it's the same code. It does this on all the mobile browsers I have installed. However, if I remove the footer, there is no 1px line. For some reason the footer causes this 1px added line in mobile.
You can see a comparison of mobile and desktop in the image below. I made the background color of the page red so you can see the line showing on the left on mobile. At the right, on desktop, same code, there is no offset.
The salient code around this area is very simple and would be:
* {
margin:0;
padding:0;
font-family:'Encode Sans', sans-serif;
color:#2b2b2b;
}
body {
background:red;
}
.content {
width:90%;
margin:0 auto;
}
#footer {
height:3em;
line-height:3em;
background:rgba(51,128,0,0.75);
}
#footer a {
margin-right:0.5em;
font-size:0.9em;
text-decoration:none;
color:#fff;
}
<div id="footer">
<div class="content">
TopPrivacyTerms
</div>
</div>
Thats a part of body so if you increase the height of the footer then it will not display.
Or
Just remove the red color from the body.
Related
I have an issue I can't figure out. I'm hoping for a CSS expert:)
http://pensacolachiropracticspinalcenters.com/
I've created a bootstrap carousel. The html blocks go like this.
<div #HomeBannerPane> (position:relative)
<div #home-carousel></div>
<div #HomeBoxWrapper (position:absolute;)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
<div #HomeBoxFirst></div>(.homebox float:left)
</div>
</div>
Actual CSS
/*Home Carousel and 3 Green Boxes*/
#HomeBannerPane{position:relative; left:-16%;}
/*#home-carousel{position:relative;}*/
#HomeBoxWrapper{
width: 75%;
position:absolute;
bottom:0px;
left:16%;
z-index:10;
}
.homebox{
width:33%;
float:left;
max-height:340px;
min-height:159px;
padding-top:21px;
padding-right:30px;
padding-left:30px;
padding-bottom:30px;
overflow-x:hidden;
overflow-y:hidden;
color:#FFFFFF;
}
.homebox h2{margin-bottom:15px;}
.homebox p{
color:white;
font-family: 'Source Sans Pro', sans-serif;
font-size:13px;
}
#HomeBoxFirst{background:#7CBA3D;}
#HomeBoxSecond{background:#43A140;}
#HomeBoxThird{background:#008238;}
I have the bottom of #HomeBoxWrapper zeroed out to the bottom of the #HomeBannerPane which is where the Carousel fits into. #HomeBannerPane has a z-index to sit on top of the carousel.
The problem I am having is when the slides rotate, it kicks the #HomeBoxWrapper and all three boxes down during the transition. I am completely stumped. I really need it to quit doing that. Any suggestions?
Thanks
If you make .carousel-inner height a bit smaller, say 660px instead 667px then the #HomeBoxWrapper not kick the three boxes inside it.I don't know exacly why, but i tested with Firebug and it works on Firefox 32. Hope it help.
Right now my code for my screen looks perfect, but for some reason everytime I change to browser size from full screen to a smaller window all my nav bar moves underneath eachother under the header div and other things as well. If I was to add things in the footer as well how can I set it up so that the page stays the same no matter how you resize it. I don't mind if its fixed on only a full screen mode.
Another issue is that when I asked a friend to check the websites on his laptop it was all messed up because of screen resolution I think, but when I saw it on my monitor it looked completely fine. So I am confused and have no idea how to fix this issue. I have researched as much as I can, but everything I tried didn't work.
So all I am trying to do is make sure that the website is fixed and is only viewable in full screen. If I resize it to smaller then you can't see parts of the page and that's all.
If you could please help me that would be great!
http://jsfiddle.net/thNRs/ ---------------->JSFIDDLE DEMO. You can see the problem right away using this.
HTML CODE:
<body>
<div id="page">
<div id="header">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
</div>
<div id="main"></div>
<div id="footer">
<!--<h4>WNG Product Development Engineering (US)</h4>
Circuit
Contact Us-->
</div>
</div>
</body>
CSS CODE:
html, body
{
padding:0;
margin:0;
height:100%;
}
#page
{
min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
position:relative;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img
{
float:left;
display:inline;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active
{
color: #FFFFFF;
text-decoration: none;
}
/*#footer h4
{
left:20px;
top:-10px;
position:relative;
text-align:left;
font-weight:bold;
font-family: Sans-serif;
float:left;
color:#fff;
margin-left:20px;
}
#footer a, a:visited, a:hover, a:active
{
color::#fff;
text-decoration:none;
position:relative;
left:1025px;
top:10px;
text-align:left;
font-weight:bold;
font-family:Sans-serif;
float:left;
margin-left:20px;
}*/
/* NAVIGATION BAR CODE */
#navigation
{
position:absolute;
top:60;
left:500;
right:0;
bottom:0;
width:60%;
height:24px;
background-color:#115EA2;
min-width:100px;
text-align:center;
padding:10px 20px;
}
#navigation a
{
font-size:20px;
font-weight:bold;
font-style:Sans-serif;
margin:10px 0;
height:18px;
padding:12px 10px;
color:#FFF;
text-decoration:none;
}
#navigation a:hover
{
background-color:#333;
}
A good solution to problems with the page shifting when the window resizes or when someone does a ctrl + mouse wheel up/down type of page zoom is to set sizes of things on the page using the em unit. For example:
height:12.5em;
not...
height:200px;
width:60%;
etc...
1em == 16px by default. If you change the font size to a new em I think it can mess things up so as long as you're not doing that you're fine.
Set all containers except for the outermost containers to a definite size and use em units as they are calculated based on the font size or something so when you zoom the page everything stays the same relative size and you don't get messes. When I say outermost container I am referring to the ones directly inside the main tags, body, header, etc... set those with:
margin:auto;
width:(desired)%;
because they are on the outside, they only change in reference to the edge of the display area so when you zoom in and out, the outer edge buffer of the page just collapses and the things in the center appear to shrink and enlarge from the center.
So get a calculator, and start converting things like width:1300px; to width:81.25em.
One last note. em units round to 3 decimal places. ie. 2px = .125em exactly but 1px =/= .0625em you would use .063em.
Something to this effect?
The biggest issue was that you didn't have a minimum width for your menu, so it would keep shrinking until it stacked on itself.
#navigation {
float:left;
width:60%;
height:24px;
min-width:1000px;
text-align:center;
padding:10px 20px;
}
Add fix width to the #navigation. It has percent value now, so its width will counted from the body's width (60%).
If the #navigation's width narrower than the elements' width sum, the elements will start to fall to the second row.
The #header's width is "97.5".
Without measurement type (px, percent or some else) it will be ignored by the browsers (it will be 100%).
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'm doing a menu for a restaurant that they dynamiclly add. it looks like this
Dish Name Price
Content in the dish,Content in the dish,Content in the dish,
Content in the dish,Content in the dish.
What i want to do is to get the blank space dotted, with . or dotted border.
But i cannot figure out how to get the css to autoadjust the width of the blank space div.
The dishnames could be longer then "dishname".
Any1 have a solution for this?
EDIT
The price and name is in 2 divs already with floats on them
.dishHead
{
font-family:Verdana;
font-size: 18px;
color:#262626;
float:left;
font-weight:200;
}
.dishPrice
{
font-family:Verdana;
font-size: 14px;
color:#262626;
float:right;
}
Edit2:
The whole thing is structured as below:
a div that floats right or left
the left floating head, the right floating price, and a description below.
I need a div between the head and price without affecting the whole div it lies in
I think I would do it with a background image on the whole of the "heading" part then use a background color on the name and price div to cover the image however that will only work if the background is a plain colour.
In answer to your question to get a third div to take up the remaining space between the left and right divs you would use overflow:hidden on it so an example using a dotted border might look like this:
Example Fiddle
CSS:
.dishHead {
font-family:Verdana;
font-size: 18px;
color:#262626;
float:left;
font-weight:200;
}
.dishPrice {
font-family:Verdana;
font-size: 14px;
color:#262626;
float:right;
}
.spacer {
overflow: hidden;
border-bottom: 3px dotted #000;
}
HTML:
<div class="dishHead">Dish Name</div>
<div class="dishPrice">Price</div>
<div class="spacer"> </div>
<div class="dishContent">
Content in the dish,Content in the dish, Content in the dish,
Content in the dish,Content in the dish.
</div>
You could place lots of dots in an element with dishname and use the fallowing css:
.dishname {
width:400px;
overflow:hidden;
white-space:nowrap;
}
I'm maintaining the Perl Beginners' Site and used a modified template from Open Source Web Designs. Now, the problem is that I still have an undesired artifact: a gray line on the left side of the main frame, to the left of the navigation menu. Here's an image highlighting the undesired effect.
How can I fix the CSS to remedy this problem?
It's the background-image on the body showing through. Quick fix (edit style.css or add elsewhere):
#page-container
{
background-color: white;
}
That is an image. (see it here: http://perl-begin.org/images/background.gif) It's set in the BODY class of your stylesheet.
The grey line is supposed to be there. The reason why it looks odd is because the very top is hidden by the buffer element. Remove the background-color rule from this ruleset:
.buffer {
float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
I think it's this:
#page-container {
border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150);
}
However, I'm not seeing why the right border isn't showing up....
I found the problem.
The problem is that you need to set a white background on #page-container. As things stand, it has a transparent background, so the 5pt left margin on navbar-sidebanner is revealing the bg of the page_container ... so change that bg and you're cool.
I would do a quick fix on this to add the style:
border-left:2px solid #BDBDBD;
to the .buffer class
.buffer {style.css (line 328)
background-color:#FFFFFF;
border-left:2px solid #BDBDBD; /* Grey border */
float:left;
height:20px;
margin:0px;
padding:0px;
width:160px;
}
Thanks to all the people who answered. The problem was indeed the transparency of the #page-container and the background image of the body. I fixed them both in the stylesheet.