I'm having some issues with parts of the footer on my website getting cut of on different browsers.
On my website here http://reportalert.info/index-test.php, the twitter, rss and share icons get cut off and move around slightly when on different browsers. I've tried changing the background position and padding of each of the icons but I can't seem to get it to work across different browsers. Any suggestions on how to fix this?
Here is the code that I have for the footer:
#footer
{
clear: both;
font-family: "Droid Serif";
margin:10px 0;
padding-bottom:60px;
width:100%;
height:10px;
text-align:left;
font-size:80%;
color:#444;
}
a.ftwitter
{
background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-twitter.png) left no-repeat;
background-position:0 -22.5px;
padding:3px 55px;
}
a.ftwitter:hover
{
background-position:0 0;
padding:4px 55px;
}
a.frssfeed
{
background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-feed.png) left no-repeat;
background-position:0 -26.5px;
padding:5px 55px;
}
a.frssfeed:hover
{
background-position:0 0;
padding:6px 55px;
}
a.fshare
{
background:url(http://reportalert.info/images/nra/ra-share.png) left no-repeat;
background-position:0 -22.5px;
padding:3px 60px;
}
a.fshare:hover
{
background-position:0 0;
padding:4px 60px;
}
Thanks in advance for your help
Padding works differently in every browser, that's why your icons gets cut off in Chrome.
I would use a specific width and height instead.
Instead of padding, try using width and height. And add a display: inline-block. Here for example:
a.ftwitter
{
display: inline-block;
background:url(http://reportalert.info/images/nra/ra-share.png/images/nra/ra-twitter.png) left no-repeat;
background-position:0 -22.5px;
width: 110px;
height: 22px;
}
I think this might help. Apply this to your icons:
position:relative;
z-index:99;
The icons that get cut off are all empty a elements. Because it's an inline flow element, that means it collapses to default text height - 20 pixels in the font you use, while the Twitter icon is 22, hence causing 2 pixels to be cut off.
Set the anchors to display:inline-block, or another block layout style fitting in your layout, and the correct height which is then allowed, and it's solved.
Related
I'm teaching myself html and css whilst at uni.
I'm trying to make a one page website, and am struggling trying to later the navigation bar over the title page. As eventually, i want the navigation bar to be mainstay on each page (which will be completed later in the project via javascript).
Can anyone point me in the right direction? I've attached some of the css code below.
Cheers
#import url('https://fonts.googleapis.com/css?family=Poiret+One');
a:link {
text-decoration: none;
}
a:visited {
color: white;
}
.Nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family: Poiret One;
}
.Nav li{
display:inline;
padding: 40px;
}
.Nav a{
display:inline-block;
padding:15px;
}
.Title-Page {
background-image: url("Images/Campeche.jpg");
background-size: cover;
padding: 200px 0 260px 0;
height: 600px;
margin: 0;
}
You need a position and a z-index to make this happen. You have to have the position for z-index to work. So here are 2 examples just remember to have your pages set up the same with a position but a lower z-index this will place the page below the nav bar. Hope it helps.
If you want it fixed while the page scrolls behind it.
.Nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family: Poiret One;
position:fixed;
z-index:90
}
If You want the Nav bar to scroll with the page.
.Nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
font-family: Poiret One;
position:absolute;
z-index:90
}
Title Page with the position set and a lower z-index.
.Title-Page {
background-image: url("Images/Campeche.jpg");
background-size: cover;
padding: 200px 0 260px 0;
height: 600px;
margin: 0;
position:absolute;
z-index:50;
}
Are you able to use z-index to achieve this? Without an example to see it's a little tough. The z-index property specifies the stack order of an element (think of bring forward or backward).
Try something like this:
.Nav {
z-index:
}
If that doesn't bring the .Nav forward, try adding this as well:
.Title-Page {
z-index: -1;
}
You may have to adjust the #'s to get the best result. The higher the #, the closer it is to you.
Note: Position could also need adjusting here. Best to put this into something like codepen if the above doesn't work and post that link.
After messing around with pseudo element css for a rather long time I've come up with a solution to the heading tag double ended custom image underline I required using the following code:
h2{
clear:both;
position:relative;
color:#000;
margin-left:83px;
background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
font-size:1.5em;
float:left;
padding:0px 0px 10px 0px;
}
h2:after,
h2:before{
content:" ";
background:url(http://i.stack.imgur.com/AulCS.png);
display:block;
width:83px;
height:31px;
position:absolute;
bottom:0;
left:0;
margin-left:-83px;
margin-bottom:-10px;
z-index:-1;
}
h2:after{
background:url(http://i.stack.imgur.com/ux1ed.png);
right:0;
left:auto;
margin-right:-83px;
}
<h2>Frequently Asked Questions</h2>
<br>
<h2>Home</h2>
Which can be seen here:
http://jsfiddle.net/848s2335/1/
However I've noticed the 3 background images do not appear to stay in line when the page is zoomed in and out. Please could anyone point me in the right direction to keep all three images in line at all times?
Thanks for your help.
Instead use background image, use border-bottom, this will set the line at the bottom of h2, next set your bottom property of after and before to match with the same position of the border.
Remove this line on your h2:
background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
Instead add this line:
border-bottom: 7px solid #000;
In your :before and :after css, change your bottom property to macth with border line:
bottom:-9px;
Fiddle
You could give the h2 element set height. I added height of 27px and it worked for me in your Fiddle:
h2 {
clear: both;
position: relative;
color: #000;
margin-left: 83px;
background: url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
font-size: 1.5em;
float: left;
padding: 0px 0px 10px 0px;
height: 27px;
}
I've managed to make the left end stay always in line by:
setting all elements' height to the same value (I used 62px)
setting background-repeat: no-repeat and background-position: center on both ends
adjusting other values (padding etc)
fiddle: http://jsfiddle.net/ecpv2kv0/
The right end is sill like 0.5px out of line, but probably editing png images to have even height value (right now it's 31px) might help here.
I'm trying to make a simple 3-cell div that will show a list of ratings for cigars. I want the left cell to be a square image of the cigar, the middle to be the name, and the right to be the rating. The code works fine until I add the image - it then seems to add an 8px border on the bottom of the image, revealing the cell's background color. Using Wordpress (if that helps). Any help is appreciated!
This is the page: http://cigardojo.com/best-cigars/
HTML
<div class="ratingWrapTopRated">
<div class="cigarImage"><img src="http://cigardojo.com/wp-content/uploads/2014/08/cigar-test.jpg" alt="test" width="90" height="90" class="alignnone size-full wp-image-14045" /></div>
<div class="cigarName">Opus XXX Power Ranger</div>
<div class="numericalScoreTopCigars"></div>
</div>
CSS
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0 auto;
display:table;
font-family:Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
width: 90px;
}
.cigarName {
background:#ff5100; color:#fff; text-align:center;
display:table-cell;
vertical-align:middle;
text-transform: uppercase;
}
.numericalScoreTopCigars {
background:#000; color:#fff; text-align:center;
width:25%;
display:table-cell;
vertical-align:middle;
font-weight:bold;
border-left: 4px solid; border-color: #fff;
}
Add line-height: 0; to .cigarImage and you will get rid of it. Many people will tell you to use display: block; and that will work but that is not the real problem. The problem is that img tags are inline and you get that space because you get the image plus the line-height it is in that container, and that creates the space you see below your image. The correct solution to that is to add what I just told you.
So edit your class like this:
.cigarImage {
background:#fff; color:#fff;
display:table-cell;
line-height: 0; /* Here is the solution */
width: 90px;
}
And you will get that working right :)
This is because images are inline (that is, they're treated like they're on a line of text) by default, and the bottom of them is aligned to the "baseline" of the line of text, not the absolute bottom. Below the image you get the space from the rest of the line below the baseline. If you just set the image to display: block; it should get rid of it (then it won't be considered part of a line of text, and will instead be its own block).
Just add a padding right of 5px or so on the .cigarImage class. You should also increase your image height or decrees the height of the info bar next to your images as they dont line up.
In your class ratingWrapTopRated class set line-height to 0:
.ratingWrapTopRated {
background:#fff;
width:600px !important;
height: 90px !important;
margin: 0;
display:table;
font-family:Helvetica, Arial, sans-serif;
padding-bottom: -8px;
margin-bottom: 10px;
line-height: 0; /*here*/
}
I'm pretty terrible at CSS/design so I'm struggling with some CSS here.
The page looks fine when loaded in a full screen browser at 1920x1080, however, as soon as you minimise or load the page on a mobile device the header content completely loses its placing but the body is fine.
Here's the CSS elements in question:
#header {
background: url(assets/header_bckg.gif) repeat-x ; height:120px;
}
#logo { display:inline-block; float:mid-left; padding:50px 0 0 570px; }
#logo { color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:20px; text-transform:uppercase;}
#login { display:inline-block; float:mid-right; padding-left:400px; padding-bottom: 7px; vertical-align:middle;}
#login{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:12px; font-size:12px; text-transform:uppercase;}
#avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; }
#avatar_online {
background: linear-gradient(to bottom, #7BAFD6 5%, #506D92 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
background-color: #545454;
border-radius: 3px 3px 3px 3px;
}
#avatar_offline {
background: linear-gradient(to bottom, #706C6B 5%, #4E4D4D 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
border: 1px solid #545454;
border-radius: 3px 3px 3px 3px;
}
#avatar_playing {
background: linear-gradient(to bottom, #9BC861 5%, #789E4C 95%) repeat scroll 0 0 transparent;
filter: none;
height: 50px;
width: 50px;
padding: 3px;
border: 1px solid #545454;
border-radius: 3px 3px 3px 3px;
}
#menu {position: absolute; margin-left:550px; top:88px; color:#fff; text-align:center; margin-top:0px;}
#menu ul{ width:800px; margin:0 auto;list-style:none; padding:0; text-align:left;}
#menu ul li{display:inline}
#menu ul a { float:left; font-weight:bold; font-size:13px; text-decoration:none; color:#fff; padding:8px 10px; width:118px; text-align:center; text-transform:uppercase; background:url(assets/menu_active.gif) no-repeat bottom center; color:#232323; }
#menu ul a:hover {
color: #85B0DF;
cursor: pointer;
text-decoration: none;
}
As always, help is greatly appreciated.
Make sure your CSS and HTML are valid. As others have pointed out, there is no such thing as float:mid-left. Also, if your jsfiddle is indicative of your HTML, you're probably throwing browsers into quirksmode, because your HTML isn't structured properly (your first three tags need to be wrapped in a <head> tag, everything needs to be wrapped in an <html> tag, and the very first line should be <!DOCTYPE html>). Use the W3C's HTML validator and CSS validator to ensure your code is correct. Only then can you begin to fix other issues.
Learn what the various CSS declarations do. While your CSS may be valid, it doesn't mean it's right. This: #avatar { display:inline-block; position:absolute; margin-top:28px; float:mid-right; padding-left: 505px; padding-bottom: 15px; vertical-align:middle; } will technically validate once the float part is fixed. However, position: absolute and float are mutually exclusive -- float doesn't work when position is absolute or fixed. It will also help to learn how padding and margin affect the positioning of the element, and how they differ from one another. Finally, vertical-align doesn't work at all unless the element is a table cell, or display is set to table-cell (and the table-related set of display properties has its own quirks, so you can't necessarily just throw display: table-cell on an element and expect it to work a certain way).
Learn how elements naturally behave, so that you can work with them, instead of against them. Make sure you know how block, inline, and inline-block elements behave, and then work with them to get the layout you want, instead of throwing display: inline-block on everything and hoping for the best. The same goes for things like links (which will naturally have cursor: pointer on hover, unless you've disabled it elsewhere). Doing this will substantially clean up your CSS, making it easier to maintain. It may also clean up your HTML, as you find out what wrapper elements you truly need or can do without.
It's a little difficult to tell what the intended result should be at smaller or "mobile" widths, even with the screenshots that you included above.
It looks like there are a number of issues with your HTML, too. Be careful with things like the <font> tag (it's deprecated as of HTML4).
That said, fixing things in your CSS such as float: mid-right and float: mid-left, which are both invalid, should help a bit. Additionally, you might want to investigate CSS positioning - specifically, you'll likely want to use position: relative on your #header div.
Take a look at this slightly cleaned up version of your example - with background colors added to see where the header ends and what space the navigation occupies.
It looks like you have multiple issues but it is hard to tell without seeing your HTML as well. For starters, #menu { margin-left:550px; } is going to be part of the problem if you are trying to align on the left edge.. You should also know that float:mid-right; is not valid CSS. Check out http://www.w3schools.com/cssref/pr_class_float.asp for more information on float.
EDIT AFTER JSFIDDLE
Put your <div id='header'> inside of your <div id='main'> and change your #menu css to be:
`
#menu { margin: 0px auto; top:88px; color:#fff; text-align:center; width:800px;}
#menu ul{list-style:none; padding:0; text-align:left;}
`
Since you already have a width defined on your menu, you can use margin: 0 auto; to keep it centered based on window size. This will allow you to remove your margin-left and keep it from being pushed to the right.
I'm at a total loss on why I can't align the Search box to the left
The Search and RSS feed align on the test page:
http://scottjaxon.com/devsite/testnivo48.html
As it is on the home page (with a pic instead of nivo slider)
http://scottjaxon.com/devsite/index.html
I don't get it. I gotta be missing the smallest thing!
#wrapper #user1 #feahome #searchhome {
float: right;
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Or is it something with the NivoSlider CSS?
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
Your index.html and testnivo48.html have different dom structures.
In index.html, the feahome div tag is the parent of rsshome and searchhome div tags; but in the testnivo48.html, they are all on the same level.
That's why the following css rule (in http://scottjaxon.com/devsite/css/style.css) gets applied on index.html, but ignored in testnivo48.html
#wrapper #user1 #feahome #searchhome {
...
}
After you fix the html, your problem might get solved.
I was looking at the CSS for both and the only thing I saw that was different in your
CSS compared to the CSS for http://scottjaxon.com/devsite/index.html is this:
#wrapper #user1 #feahome #searchhome {
float: LEFT; // the working version has it floated left as well
color: #FFFFFF;
height: 22px;
margin-top: 8px;
padding: 0px 20px 0px 20px;
Give it a shot and see if that works.
It may be a prioritizing problem. Using div#searchhome will give it a higher priority.