I'm trying to integrate a responsive menu to my website here but I also have a colorbox script running on it. The thing is, The css of the responsive menu ( which i got here) is messing up my colorbox css. the css is as follows:
colorbox css:
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;
overflow:hidden; }
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
the Responsive menu css is as follows:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
width: 90%;
margin: 50px auto;
}
nav ul {
list-style: none;
text-align: right;
/* overflow: hidden; */
}
nav li a {
background: #444;
border-right: 1px solid #fff;
color: #fff;
display: block;
float: left;
font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;
/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/*HOVER*/
nav li a:hover , nav li a.current{
background: #222;
}
nav li a:visited {
color:#FFF;
}
nav li:last-child a {
border: none;
}
/*SMALL*/
nav small {
color: #aaa;
font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
text-transform: none;
}
...more responsive css STUFF ( unimportant)
I've located the Issue. I need help fixing it. when I open up the colorbox pictures, the box itself is smaller than the rest of the popup. so It looks aweful, I'm testing it in FireFox 18.0.1 but if I use Chrome Version 24.0.1312.56 m and it works in Chrome ( it shows teh whole thing)
The issue is with this line in the menu css:
-moz-box-sizing: border-box;
and I'm not too familiar with it to know what its doing, but I know If I take it out, my resposive design menu doesn't work preperly, but my colorbox does. I'm thinking of taking it away from the "*" portion of the css and add it somewhere else, but how can I do this? can I hard code it to a div or something? here is my html:
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/menu-css.css">
<link rel="stylesheet" href="colorboxjs/colorbox/colorbox1.css" />
<script type="text/javascript" src="jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="colorboxjs/jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".gallery3").colorbox({rel:'gallery3', transition:"none", width:"75%", height:"75%"});
});
</script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
</div><!-- container -->
<div class="container" style="background:lightgray; padding: 15px">
<h3> 5 menu right </h3>
<nav>
<ul>
<li><a class="current" href="#">First</a></li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</nav>
</div>
<div class="container" style="background:lightgray; padding: 15px">
<P>THIRD TYPE - No Transition + fixed width and height (75% of screen size)</P>
<a class='gallery3' href='images/slider-1.jpg'>Pic 1</a>
<a class='gallery3' href='images/slider-2.jpg'>Pic 2</a>
<a class='gallery3' href='images/slider-3.jpg'>Pic 3</a>
</div>
<br/><br/>
<!-- End Document
================================================== -->
<script>
jQuery('a.gallery').colorbox();
</script>
</body>
</html>
THanks for all the help in advanced. ~Myy
What box-sizing: border-box; does is, it will include all border and padding widths/length in your content-width. so instead of 1px border + 50px width = 52px total width, border-box will always force the total-width to be 50px.
You can always use media-queries and start using the border-box from a certain screen-size, that would seperate your normal and mobile css pretty well, but it will cause similar errors on the small screen which you need to fix.
Here's a quick intro about media-queries: http://css-tricks.com/css-media-queries/
Alternatively you can get rid of the border-box and manually nudge any changes you see back in place (use FF's firebug or Chrome developer tools for this). But I do want to add that border-box is pretty cool & handy, you should consider leaving it in and nudging your default code.
Related
I created social media icons in my navbar as below. It works fine in my browsers (Chrome, Edge) but for my partner, in South Africa: it does not show at all for them, using the same browsers.
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
Within NAVBAR:
<ul class="social-icons">
<li></li>
<li></li>
<li></li>
</ul>
Custom CSS:
.social-icons {
padding: 0px;
margin: 0px;
}
.social-icons li {
display: inline-block;
list-style: none;
background: #00917C;
margin: 10px 0px 0px 0px;
border-radius: 5px;
}
.social-icons li a {
color: #FFFFFF;
text-decoration: none;
font-size: 20px;
padding: 10px 15px;
text-align: center;
transition: all 0.4s ease-in;
}
.social-icons li a:hover {
background: #d54ab6;
color: #fff;
}
As currently displayed, it works fine in my browsers, here in the USA. So strangely enough, it does not work in my partners browser in South Africa.
As i tried to display them on my pc, they aren't displayed on one of my browsers. So i moved this outside of it and it wont display it. Then i tried to change the a to i and it wont display. So on, the problem must be that the css sheet of font-awesome isn't properly loaded into it or they are premium icons. I don't know if that's correct, but it's just an idea to check.
Link to another question handling with font-awesome:
Font Awesome icons are not working, I have included all required files
I have a CSS file that will display a background image in IE, but that same background image won't in firefox. Specifically, its the headerdoc image that's the problem, the one above the menu.
What I'm trying to do is create a main div section and then create the rest of the layout in sections.
Yes, I know you could do this with a table, yuck, ugly hard to manage and even more difficult to maintain not to mention its ugly, hard to manage and even more difficult to manage.
Any help with this would be greatly appreciated.
P.S. Here is what I'm trying to accomplish - I have a page that is the full width and heighth of the screen minus a 2.5% margin around the edges. No biggy here, that's working just fine.
within that container I have a header section called #headerDoc. That should be the full width of the parent container and x % in heighth. It is here that I want to have a background covering the full area of this container.
Within the header section I have a menu section that will comprise just the bottom edge of the #headerDoc parent. say 10% of the bottom. This has its own background so its colored correctly.
After that I'll finish building out the rest of the screen. But that is what I'm attempting to do here.
Here is the CSS data:
/************************* ID's *************************/
#mainDoc {
margin-top: 2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
margin-left: 2.5%;
background-color: #494948;
}
#headerDoc {
width="100%";
height="10%";
background-image: url('./images/bg1.jpg');
}
#menu {
/* position: relative;*/
width: 100%;
height: 32px;
margin-top: 50px;
/* font-size: 14px;*/
font-size: 1em;
font-family: Tahoma, Geneva, sans-serif;
/* font-weight: bold;*/
text-align: center;
/* text-shadow: 3px 2px 1px #FFFFFF; */
background-image: url('./images/dpmenu.gif');
/* background-color: #8AD9FF;*/
background-color: #494948;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 10px;
}
#menu a {
text-decoration: none;
color: #ffffff;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #000000;
}
Here is the html use of the tags
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<title>Css Test</title>
</head>
<body>
<div id="mainDoc">
<div id="headerDoc">
<div id="menu">
<ul class="bdr-t bdr-b">
<li class="bdr-r ctr">HOME</li>
<li class="bdr-r ctr">CLASSIFIEDS</li>
<li class="bdr-r ctr">PLACE AD</li>
<li class="bdr-r ctr">DIRECTORY</li>
<li class="bdr-r ctr">HELP DESK</li>
<li>MANAGE ACCOUNT</li>
</ul>
</div>
</div>
</div>
</body>
Sorry about the "=" I missed that one (had a few others I forgot the syntax for, but even after changing those it still didn't make a diff.
Try
#menu ul { ... background-image: url('./images/dpmenu.gif'); .... }
by the way, whats in
bdr-t,
bdr-b,
bdr-r,
ctr css class?
Not solved but I think the problem is something else and not the css or pngfix.
Thanks for your replies.
Hi!
Don't know how to define the problem so I'll just show it to you.
I'm trying to set an image as a small background image of a link. for some reason on IE6 it inherits the background color of it's parent class...
Image here: http://lh4.ggpht.com/_Gj0LjMkd2XM/TOPp4gpuEzI/AAAAAAAAANE/0omEfRzIzho/2010-11-17_1637.png
CSS:
.tabbed-box .top li a {
background: none repeat scroll 0 0 transparent;
color: #8A8B86;
display: block;
float: left;
font-size: 11px;
font-weight: bold;
height: 16px;
margin: 0;
padding: 6px 0 3px 12px;
text-decoration: none;
}
.tabbed-box .top li.current {
background-color: white;
background-image: none;
border: 1px solid #95B776;
margin-top: -2px;
z-index: 10;
}
.tabbed-box .top li.current a {
background: url("quotes-arrow.png") no-repeat scroll 15px 24px transparent;
color: #006697;
position: relative;
height: 30px;
}
and the HTML:
<div class="top">
<ul>
<li id="tab-forex" class="current">
<span>Forex</span>
</li>
<li id="tab-commodities" class="">
<span>Commodities</span>
</li>
<li id="tab-indices" class="">
<span>Indices</span>
</li>
<li id="tab-stocks" class="">
<span>Stocks</span>
</li>
</ul>
</div>
Tried EVERYTHING! :)
would appreciate any help!
UPDATE:
also used iepngfix.htc script and put this on
<!--[if lte IE 6]>
<style>
.tabbed-box .top li.current a { behavior: url('iepngfix.htc'); }
</style>
<![endif]-->
I know the problem is related to the height: 30px; on .tabbed-box .top li.current a. when I remove it or lower the value I get different results but none of them solves the problem.
The problem isn't your CSS; it is that IE6 has broken support for transparency in PNG graphics.
My opinion would be just not to bother supporting IE6 because it has so many bugs and issues like this. But I understand that's not an option for everyone.
The good news is for this particular bug, that there is a hack to get around it:
http://www.twinhelix.com/css/iepngfix/
Hope that helps.
[EDIT]
If that doesn't work, I suppose the other option is to switch the graphic to be a GIF. Bit of a cop-out, but will sort out the problem quicker than trying to work around IE6's failures.
try the following:
.classname {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/cnr-heading.png', sizingMethod='scale');background: none;
}
IE6 has an issue displaying png files which have transparent parts. The are some javascript workarounds. Check this site to see some options.
I am having a very odd opacity/hover problem in IE. Everything works in FF and Chrome.
Consider this page:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#outer").css("opacity", .7);
});
</script>
<style type="text/css">
#outer
{
position: absolute;
width:600px;
background: #111;
z-index:2;
overflow: hidden;
}
#outer div
{
float: left;
}
ul
{
list-style: none;
margin: 0;
padding: 0;
}
ul li
{
width: auto;
margin: 2px 4px 2px 4px;
padding: 2px 4px 2px 4px;
font-size: 11px;
color: White;
}
ul li:hover
{
background: red;
font-weight: 600;
cursor: pointer;
}
</style>
</head>
<body>
<div id="outer">
<div id="one">
<ul>
<li>111</li>
<li>222</li>
</ul>
</div>
<div id="two">
<ul>
<li>333</li>
<li>444</li>
</ul>
</div>
<div id="three">
<ul>
<li>555</li>
<li>666</li>
</ul>
</div>
</div>
</body>
</html>
Here's the problem. The mouse-over is intermittent - you may or may not see a red background and font change in IE (7 or 8). You will always see the cursor change. If I take the background and font-weight out, I still see the cursor change. But if either the background or the font-weight are there, The cursor will still change but the background or font may or may not.
If the opacity is NOT set on #outer, everything works everywhere. Again, FF and Chrome are fine.
What do you think?
UPDATE: This semes to be restricted to IE8. When IE8 is in compatability mode (acting like IE7) all is well!
But, including this tag in header:
<meta id="metaIE8IE7" http-equiv="X-UA-Compatible" content="IE=7" />
does NOT fix it.
Had the same problem and found a solution (although my solution was for a:hover not an li:hover and I've not tested)
Basically, make sure element 'has-layout'. For example, display:block, etc. Then reset transparency for that element. -ms-filter: "";
just got the perfect working combination:
display: block;
zoom: 1;
opacity:0.4; /*for ie9 and other browsers */
filter: alpha(opacity=40); /*for ie older browsers*/
As Bob sayed the 'has-layout' is essential for it to work in ie 8. Here the 'display: block;' does the job.
More CSS cargo-cult for me! I have no idea, but focing IE8 into IE7 mode fixed the problem. I was wrong about it not working in the question. Still good in other browsers too.
I apologize for the headline, I don't really know a better way of putting it (let me know if you have a better way, I will change it). Please consider the following code:
<html>
<head>
<title>IE 6 Menu Test</title>
<style type="text/css">
.nMenu {
border: 1px solid black;
}
.nMenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nMenu a {
display: block;
padding: 3px 0px 3px 5px;
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight: bold;
text-decoration: none;
}
.nMenu a:hover {
background-color: #dddddd;
}
</style>
</head>
<body>
<div class="nMenu">
<ul>
<li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li>
</ul>
</div>
<hr />
<div class="nMenu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
</body>
</html>
In firefox, both the top and bottom menus display exactly the same. But in IE6, the bottom version, which is identical to the top except for the carriage returns after each list element, displays with extra padding above each element. The top version, without the carriage returns does not. This is especially apparent (the extra padding) when rolling over the items in the bottom list.
It seems that IE6 is rendering the carriage returns for some reason. For now we have just resorted to formatting our code like the top example, but this is less than ideal. Is there something we can put in the CSS to make this look proper in IE6?
Apply display: block; to the li, tell IE6 to make the a 100% in width, and tell all browsers to display the a as a block instead.
.nMenu li {
display: block;
}
/* hack for IE6 */
* html .nMenu a
{
width: 100%
}
.nMenu a {
display: block;
padding: 3px 0px 3px 5px;
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight:bold;
text-decoration:none;
}
Tried it in IE6 and both lists look identical, and renders exactly the same in Firefox.
I don't have a solution to the main issue, but you could change your code formatting to look nicer and still work in IE 6.
<div class="nMenu">
<ul>
<li>One</li
><li>Two</li
><li>Three</li
><li>Four</li
><li>Five</li>
</ul>
</div>
Try adding overflow: hidden; to .nMenu li.