Hoping someone can help me with this problem I'm having w/ IE. So the page I am working on has an image containing Facebook, Twitter and Youtube tabs.
All these tabs are clickable in most other browsers (Chrome/Safari/Firefox/Opera) except in Internet Explorer (7/8). I am not sure what I am doing wrong here, can anyone PLEASE help me?
HTML (edited):
<div id="head">
.
.
.
<div id="icons">
<ul class="nav1">
<li></li>
<li><a id="facebook" rel="_blank" href="https://www.facebook.com"> </a></li>
<li><a id="twitter" rel="_blank" href="https://twitter.com"> </a></li>
<li><a id="youtube" rel="_blank" href="https://www.youtube.com"> </a></li>
</ul>
</div>
.
.
.
</div>
CSS (edited):
#icons {
position:absolute;
top:44px;
right:200px;
z-index:9;
float:left;
/*width:105px;*/
height:35px;
/*background:url(/images/sprite_header_icons.png) no-repeat -6px 0;*/
}
#icons ul.nav1{
height: 35px; /*added*/
}
#icons ul.nav1 li {
display: inline;
padding-left: 1px;
height: 35px !important; /*added*/
}
#icons ul.nav1 li a {
display: inline;
/*width: 34px;
height: 31px;*/
}
ul.nav1 li a:hover {
}
#icons ul.nav1 li a#facebook {
padding-left: 20px;
padding-right: 13px;
padding-bottom: 28px;
background:url(/images/sprite_header_icons.png) no-repeat -6px 0; /*added*/
width: 20px; /*added*/
height: 35px; /*added*/
}
#icons ul.nav1 li a#twitter {
padding-left: 20px;
padding-right: 13px;
padding-bottom: 28px;
background:url(/images/sprite_header_icons.png) no-repeat -40px 0; /*added*/
width: 20px; /*added*/
height: 35px; /*added*/
}
#icons ul.nav1 li a#youtube {
padding-left: 20px;
padding-right: 13px;
padding-bottom: 28px;
background:url(/images/sprite_header_icons.png) no-repeat -74px 0; /*added*/
width: 20px; /*added*/
height: 35px; /*added*/
}
NOTE:
Okay, so i have made some changes based on what Ryan Beaulieu, Alex Reynolds & OhMrBigshot suggested here. Now, the tabs are clickable in IE (7/8)...however, the tabs are partially (li 38px x 16px) visible like this:
the width is fine, but how can i increase the height to 35px from 16px? Thank you!!
Try adding display:block
#icons {
position:absolute;
top:44px;
right:200px;
z-index:9;
float:left;
width:210px;
height:30px;
background:url(/images/sprite_header_icons.png) no-repeat -6px 0;
}
#icons ul.nav1 li {
display: inline;
float:left;
padding-left: 1px;
}
#icons ul.nav1 li a {
float:left;
display:block;
width: 34px;
height: 31px;
}
Are you using rel="_blank"? Is that HTML5? Is the verision of IE you're using 9? Could it be that you should use target="_blank"?
IE sometimes ignores "empty" elements, even if you define size. Try adding in the a tag.
Related
I'm trying to create a very basic page of weblinks, arranged into 7 columns. Some of the links have sub-links. What I want to happen is when the mouse is held over a link that has sub-links, the sub-links are to appear just below it and just to the right (as shown in menu 2.2)
I've cobbled the code together from various websites (I'm not a coder!), and I'm almost there I think, but if you take a look at the jsfiddle you will see there is a problem with the 3rd column (I've cut the menu down in the example).
HTML
<div id="container">
<ul id="menu">
<li><h3>Menu 1</h3></li>
<li>1.1</li>
<li>1.2</li>
</ul>
<ul id="menu">
<li><h3>Menu 2</h3></li>
<li>2.1</li>
<li>2.2
<ul id="sub1">
<li>2.2.1</li>
<li>2.2.2</li>
<li>2.2.3</li>
</ul>
</li>
</ul>
<ul id="menu">
<li><h3>Menu 3</h3></li>
<li>3.1
<ul id="sub2">
<li>3.1.1</li>
<li>3.1.2</li>
<li>3.1.3</li>
</ul>
</li>
<li>3.2</li>
<li>3.3</li>
</ul>
CSS
a {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration:none;
color:black;
display:block;
padding-top: 17px;
padding-bottom: 17px;
outline: 0;
}
a:visited {
color:black;
background-color:#fff;
}
a:hover {
color:#fff;
background-color:#302403;
display:block;
}
ul {
padding: 10px 0px 0px 0px;
margin: 1px;
display: inline-block;
text-align: center;
position:relative;
list-style-type:none;
float: left;
width: 160px;
background-color: #fff;
height: 400px;
}
ul#sub1 {
position: relative;
left: 30px;
top: -15px;
visibility: hidden;
height: auto;
padding: 0;
}
ul#sub2 {
position: relative;
left: 30px;
top: -15px;
visibility: hidden;
height: auto;
padding: 0;
}
ul#menu li:hover #sub1 {
visibility: visible;
height: auto;
z-index: 1;
border: 2px solid;
padding: 0;
}
ul#menu li:hover #sub2 {
visibility: visible;
height: auto;
z-index: 1;
border: 2px solid;
padding: 0;
}
http://jsfiddle.net/87u27aw0/
I can get it to work if I give each sub-menu it's own absolute position, but I'm sure there is a better way than how I'm doing it - using relative maybe? Oh, and it has to work in IE8 onwards.
Thanks in advance.
Graybags
I am trying to create a horizontal top header with a main nav stacked on top of a sub nav. Both navs are created using <ul> with floated <li> items. The sub nav has extra horizontal space to the left whose cause I cannot discern (see the circled red area in the picture below):
Here's a fiddle: http://jsfiddle.net/W3qqh/
Questions
What's causing the space?
How can I eliminate the space?
Also feel free to suggest other alternatives for achieving the desired menu, if you believe my approach could be improved.
HTML
<div class="header">
<div class="home-logo">HOME</div>
<div class="main-nav">
<ul>
<li><a>Explore</a></li>
<li><a>Earn</a></li>
<li><a class="selected">Merchants</a></li>
</ul>
</div>
<div class="sub-nav">
<ul>
<li><a>Be Secure</a></li>
<li><a>Get Help</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
CSS
* { box-sizing: border-box; }
.header { height:99px; width: 100%; position:fixed;}
.header.glass {opacity: 0.8; filter: alpha(opacity=80);}
.home-logo { background: pink; height:99px; width: 239px; position: fixed; }
.main-nav { color: white; position: relative; left:239px; background: #25c0df; height: 66px; line-height:66px; padding: 2px; width: 100%; text-transform: uppercase; font-size: 14px;}
.main-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.main-nav li { float:left; margin-left: 40px;}
.main-nav li a.selected { border-top: 2px solid white; }
.main-nav li a:hover { border-top: 2px solid white; }
.sub-nav { font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; width: 100%; text-transform:uppercase; }
.sub-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.sub-nav li { float:left; margin-left: 40px;}
In .sub-nav, add:
float:left;
position:relative;
left:239px;
In .main-nav, add:
float:left;
Solution: You had to add float:left; in both .main-nav and .sub-nav and you had to add position:relative; and left:239px; because of the logo on the left.
Your problem would have been solved with just having float:left; but you needed to added position and left. Otherwise, your text would be behind the logo.
JSFiddle Demo
UPDATE
In .main-nav, you have:
padding: 2px;
If you remove that and add position and left in .sub-nav, you wouldn't need float property.
JSFiddle Demo
Is this more what you were looking for: http://jsfiddle.net/W3qqh/2/?
First, set the outermost container to 100% width. Then float the three inner container divs and assign a width. Then apply a float to all <li> items (or use display: inline-block).
.header { width: 100%; }
.home-logo { width: 33.333%; float: left; background: pink; height:99px; }
.main-nav { width: 66.666%; float: left; color: white; background: #25c0df; height: 66px; line-height:66px; padding: 2px; text-transform: uppercase; font-size: 14px;}
.sub-nav { width: 66.666%; float: left; font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; text-transform:uppercase; }
I'm simply trying to modify the navigation bar of my site for smaller devices. The site should be remaining with a fixed design for iPads+ resolutions, and then become responsive for smaller resolutions. While the mobile-size specific codes are applying to some classes (container, main, etc.), they don't seem to apply to the navigation div. You can see how it's currently functioning here: http://moore.whiterabbitstudio.us/
Here is a fiddle for permanence: http://jsfiddle.net/ursalarose/xAp72/
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<body>
<div class="container">
<div class="main-hold">
<div class="main">
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Process</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS:
body
{
display: table;
margin: 0 auto;
letter-spacing: .1em;
text-align: center;
font-size: 16px;
}
*
{
margin:0;padding:0;
}
html,body
{
height:100%;
}
.container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.main-hold {
height:600px;
width:1000px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.main {
height:540px;
width:900px;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
/* MOBILE DEVICES */
#media screen and (max-width: 950px){
.main-hold {
width:500px;
display: table-cell;
vertical-align: middle;
text-align: center;
margin-top: 0px auto;
}
.main {
width:100%;
background-repeat:no-repeat;
background-position:center top;
margin-top: 0px auto;
}
#nav {
margin: 20px auto 0 auto;
float:none;
width: 100%;
}
#nav ul {
list-style:none;
}
#nav li {
width: 100%;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align:center;
width: 100%;
height: 22px;
display: inline;
background-color:#CCC;
background-image: none;
padding-right: 0px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#FFF;
}
}
/* NAVIGATION */
#nav {
float: left;
height: 250px;
width: 168px;
margin-top: 60px;
}
#nav ul {
list-style:none;
}
#nav li {
width: 168px;
height: 28px;
display: block;
margin-bottom: 8px;
}
#nav li a {
font-size: 14px;
text-decoration:none;
color:#888;
display: block;
text-align: right;
width: 148px;
height: 22px;
display: block;
padding-right: 20px;
padding-top: 6px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
#nav li a:hover, #nav li a.current {
background-color:#fff;
}
Thank you for any help! I've never tried designing for mobile devices before.
Try placing the mobile CSS below the desktop CSS, as the desktop CSS is now overwriting the mobile css.
I am trying to get 2 columns :
one div called words and
other ul called snaps which has li of images
currently when i resize the images instead of resizing it just moves to next row...how do i get them to resize based on screen width
below is the example
<div class="main">
<div class="subfooter">
<div class="words">
this is test messgae
</div>
<ul class="snaps">
<li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA"/></li>
<li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA" /></li>
<li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA"/></li>
<li><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR6HIp-1dv221Es0Hk1E9OuQMzcavdw51paj4T0-zrZfxKgXmUXfA" /></li>
</ul>
</div>
</div>
below is the working example
FIDDLE
This should be what you are looking for :
FIDDLE
You need to specify the width of <li> elements and then you can use width:100%; height:auto; on the images so they resize according to the width of <li> elements.
CSS :
.main {
width: 100%;
height: auto;
float: left;
display: inline-block;
position: relative;
}
.subfooter {
width: 100%;
background-color: #99CC66;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
display: block;
}
.words {
float: left;
width: 45%;
display: inline-block;
background-color: #996633;
padding-left: 20px;
padding-right: 20px;
margin-left: 50px;
}
.snaps li {
width: auto;
float: left;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
box-sizing:border-box;
width:50%;
}
.snaps li img {
width:100%;
height:auto;
}
.snaps {
width: 45%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
display: inline-block;
list-style-type: none;
}
Add following instead of width 200:
.snaps li img {
max-width:100%;
height:auto;
}
This is because the images has a fixed with, use percentages instead of setting them to be 200px
This is what i did:
.snaps li {
width: 50%;
float: left;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.snaps li img{
width: 100%;
}
Try this. I've updated you fiddle.
.words {
float: left;
width: 45%;
background-color: #996633;
}
.snaps {
width: 45%;
margin: 0;
float: left;
list-style-type: none;
}
.snaps li img {
width:23%;
float:left;
margin:1%;
}
Fiddle
I have an issue regarding a div we have on our test site, only when viewed on an iPad (or, I'm guessing, a screen that is tablet size)...
http://jmldirect.uat.venda.com
The Join Us (social icons) // Newsletter bar bleeds out of the main wrapper and I have no idea why.
Here is the HTML and relevant CSS:
HTML:
<div id="socialfooter">
<ul class="getSocial">
<li><a class="join-us">JOIN US</a></li>
<li><a class="foot-fb" href="https://www.facebook.com/JMLDirect" target="_blank" alt="JML on Facebook"></a></li>
<li><a class="foot-tw" href="https://twitter.com/JML_Direct" target="_blank" alt="JML on Twitter"></a></li>
<li><a class="foot-yt" href="http://www.youtube.com/user/JMLdirect" target="_blank" alt="JMl's YouTube Channel"></a></li>
</ul>
<ul class="newsletter">
<li><label for="emailsignup"><a class="join-us">SIGN UP TO OUR NEWSLETTER</a></label></li>
<li><form></form></li>
</ul>
</div>
CSS:
#socialfooter {
background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent;
clear: both;
display: block;
height: 55px;
margin: 0 auto;
width: 1010px;
}
#socialfooter ul.getSocial {
display: inline;
float: left;
list-style-type: none;
margin: 7px 0 0 46px;
width: 192px;
}
#socialfooter ul.newsletter {
display: inline;
float: right;
height: 38px;
list-style-type: none;
padding: 7px 11px 9px 0;
width: 564px;
}
You have set a width on the parent div:
#socialfooter{ width:1010px;}
and then floated the newsletter ul to the right of that div:
#socialfooter ul.newsletter{float:right; width:564px;}
The problem with this is that the iPad doesn't have the resolution to display such a wide div (#socialfooter).
If you want the content to show up, use percentage based widths like this:
#socialfooter {
background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent;
clear: both;
display: block;
height: 55px;
margin: 0 auto;
width: 100%;
}
#socialfooter ul.getSocial {
display:inline-block;
box-sizing: border-box;
float:left;
list-style-type:none;
margin:.5em 0 0 2em;
width:50%;
}
#socialfoter ul.newsletter {
display: inline-block;
box-sizing: border-box;
float:right;
vertical-align: middle;
list-style-type: none;
padding:0 2em 0 0;
width:50%;
}
EDIT:
#socialfooter {
background: url("../images/social_icons/social_footer_wrapper_1010.png") no-repeat scroll 0 0 transparent; //
^ This background is causing the issue. It is an image that is set to 1010px, so even CSS isn't going to help you there.
clear: both;
display: block;
height: 55px;
margin: 0 auto;
width: 100%;
}
#socialfooter ul.getSocial {
display:inline-block;
box-sizing: border-box;
float:left;
list-style-type:none;
margin:.5em 0 0 2em;
width:30%;
}
^ Changed the width to accommodate the large input field on the right side
#socialfoter ul.newsletter {
display: inline-block;
box-sizing: border-box;
float:right;
vertical-align: middle;
list-style-type: none;
padding:0 2em 0 0;
width:70%;
}
^ And gave this right side more width to make room for your input.
ANSWER:
1. Markup:
<div class=“socialfooter”>
<ul class="getSocial">
<li><a class="join-us">JOIN US</a></li>
<li><a class="foot-fb" href="https://www.facebook.com/JMLDirect" target="_blank" alt="JML on Facebook"></a></li>
<li><a class="foot-tw" href="https://twitter.com/JML_Direct" target="_blank" alt="JML on Twitter"></a></li>
<li><a class="foot-yt" href="http://www.youtube.com/user/JMLdirect" target="_blank" alt="JMl's YouTube Channel"></a></li>
<li><a class="foot-pin" href="http://www.pinterest.com/JMLdirect" target="_blank" alt="JMl on Pinterest"></a></li>
</ul>
<ul class="cards">
<li><a class="mastercard"></a></li>
<li><a class="visa"></a></li>
<li><a class="maestro"></a></li>
<li><a class="visaElectron"></a></li>
<li><a class="Paypal"></a></li>
</ul>
</div>
2. CSS:
.socialfooter {
height:55px;
width:100%;
background:url("../images/social_icons/social_footer_wrapper_1010.png") repeat-y 50% 0 transparent;
clear:both;
position:relative;
}
.socialfooter ul.getSocial {
display:inline-block;
box-sizing: border-box;
float:left;
list-style-type:none;
margin:.5em 0 0 -38em;
width:30%;
position:absolute;
}
.getSocial li {
position:relative;
float:left;
}
.socialfooter ul.cards {
display: inline-block;
float: right;
list-style-type: none;
margin: 1.35em 0 0 13em;
position: absolute;
width: 30%;
}
.socialfooter li {
display: inline-block;
list-style-type: none;
background:none;
}
.cards li {
float:left;
padding:0 7px;
}
.cards li a {
background: url("../images/social_icons/elements.png") no-repeat transparent;
}
.cards li a.mastercard {
background-position: -15px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.visa {
background-position: -58px -386px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.maestro {
background-position: -102px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.visaElectron {
background-position: -145px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}
.cards li a.Paypal {
background-position: -189px -385px;
display: block;
height: 24px;
margin-left: 5px;
width: 38px;
}