I get a scrollbar for the body on every page and it scrolls maybe 2em in height. This is happening on every browser IE, Chrome, Opera, and FF even in full screen (1680x1050).
I can't simply do overflow:hidden for the body because of the third test page uses SlimBox2 might needs to scroll down.
Three test pages:
http://dev.mykeepsakephotography.com
http://dev.mykeepsakephotography.com/gallery_couples.php
http://dev.mykeepsakephotography.com/invitations_weddings.php
body
{
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #000;
color: #fff;
padding: 0;
margin: 0;
}
#wrapper
{
height: 725px;
width: 950px;
background: #000;
margin: 0 auto;
padding:0;
overflow: hidden;
border: 1px solid red; /* added for border definition */
}
Thank you,
LF4
The li.dir's within your nav are causing the scrolling. Removing them eliminates the issue.
Within them, the ul.dropdown ul has an attribute
top:100%
which is causing the issue. The nested menus here are causing elements to appear below the bottom of the page. Fix this and your problems are history :)
Throw a position:relative; on your ul.dropdown > li > a, ul.dropdown li.dir { selector and everything will work splendidly.
Position:absolute will position it absolutely to the nearest parent with position:relative, or failing that-- the document itself.
The slimbox.css has the following settings:
#lbOverlay {
background-color:#000000;
cursor:pointer;
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:9999;
}
I winder if height should be 725px, the same as #wrapper.
Related
I am having trouble with my submenu. It's a simple drop down menu that I have beside my posts and I got it working and all. The problem is that depending on my scroll position, it will sometimes reach the bottom of my screen. I was thinking about making something similar to the menus of http://9gag.com where the menus are fixed in 50% of the screen. But I guess that would be too complicated.
I tried to set the parent menu z-index to a lower value but it didn't work? I'd be thankful for any help.
Here's the fiddle: http://jsfiddle.net/HyKuR/
.Post .Bottom .nav {
display: block;
line-height: 24px;
font-weight: bold;
margin: -140px 450px 0px;
position: absolute;
z-index:2;
}
.Post .Bottom .nav li.submenu ul {
visibility:hidden;
-webkit-padding-start: 0 !important;
margin-left: 40px;
margin-top: -215px;
bottom:100%;
background-color: white;
border:1px solid gray;
}
.Post .Bottom .nav li.submenu:hover ul {
visibility: visible }
.Post .Bottom .nav li.submenu ul li {
border-bottom:1px solid gray
z-index:10 !important;
}
As drip says give us your code in a jsfiddle so we can help. But from the top of my head I'd say your problem is down to your position:absolute on both menus. You should use position:relative on the parent menu then use position:absolute on the submenu so that it is placed based on the parent menu rather than the screen.
While working on a responsive design, I noticed that everything is responsive except for my unordered list. When I resize the browser, the list doesn't move or stay centered in its DIV. I've tried a bunch of things all day but simply can't figure it out. For context, #sitecontent is the container holding everything, #sitecontent .leftsidebar contains an image and the unordered list, and #sitecontent .leftsidebar ul is the unordered list. Can someone check it out and tell me what's wrong? Please visit my site at http://www.tommaxwell.me and view the source.
Try this CSS:
#sitecontent .leftsidebar ul {
position: relative;
top: -5px;
list-style-type: none;
font-family: 'Patua One', cursive;
padding-left: 10px;
}
#sitecontent .leftsidebar ul li {
margin-bottom: 3%;
clear: both;
border-bottom: 1px solid #E5E5E5;
font-family: helvetica;
text-align: center;
}
My browser is adding some padding to the list, which is a pretty common thing for browsers to do. You might consider using a reset (meyer, yui), or just setting explicit padding/margin on the ul and li's.
I guess I was overcomplicating the whole thing, and in the process forgetting the whole point of responsive designs in the first place. Adding padding/margin around the list is absolutely acceptable to use in the case, as I'll use media queries at breakpoints. Don't know why I was making things so complicated in my head!
Hi update your css with mine actually i have given the horizontal padding to your .leftsidebar ul parent div and made some changes in its list-items and its working fine now.. see the attached image for your reference :-
CSS for till IPad
#sitecontent .leftsidebar ul {
padding: 0 25%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#sitecontent .leftsidebar ul li {
border-bottom: 1px solid #E5E5E5;
display: block;
font-family: helvetica;
line-height: 25px;
margin: 2px;
}
And for iphone you will have to write the css :-
image reference for iphone :-
CSS for till IPhone
#sitecontent .leftsidebar ul {
margin-top: 10%;
margin-bottom:20%;
position: relative;
}
I have gone from this:
www.gofar.org
To this:
www.gofar.org/homepagetest.html
I have tried to remove the one block seperator on the far right end of the nav bar. I am lost.
I tried putting it in a div but what I really need to do is make the background image (green) go from the left side of the header to the edge of the right side.
Just do not know how.
here is the css
ul#saturday{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:normal;
background:transparent url("bgOFF.gif") repeat-x top left;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
border-bottom:4px solid #336666;
overflow: hidden;
color: #003;
text-align: center;
z-index: auto;
}
I even tried putting it in a table but it never fits across the entire header.
This may help.
/* Remove left padding from header */
.twoColFixLtHdr #header {
padding: 0 10px 0 0px;
/* padding: 0 10px 0 20px; OLD - Delete this line*/
}
/* Add left padding to ul */
ul#saturday {
padding-left: 10px;
}
/* Remove border bg from last anchor */
ul#saturday li:last a {
background-image: none;
}
Also, Read/watch these on chrome inspector tools,
you can edit the CSS live in the browser which
makes things easier for beginners and experts alike.
https://developers.google.com/chrome-developer-tools/docs/videos
you can try instead of using width:100%, change it to the width of the white container. That way it would go all the way across. Width:100% only sets it to as large as the content.
First i will show you the problem, wich only happens on IE6/IE7
As you can see, when the length of the innerHtml it's not long, no problem; but when it's 'longer' the sprite set as bg image gets repeated and the text jumps to the next line...
now, the CSS
.contButton {
list-style: none;
float: right;
}
.contButton p {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 0 0 10px !important;
}
.contButton a {
text-decoration: none !important;
float: left;
color: #FFF;
cursor: pointer;
font-size: 14px !important;
line-height: 21px;
font-weight: bold !important;
}
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
/*ESTADO NORMAL AZUL*/
.contButton p a {
background: url(../nImg/spriteBotones.png) no-repeat right -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat right -214px;
color: #FFF;
}
.contButton p a span {
background: url(../nImg/spriteBotones.png) no-repeat left -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat left -214px;
}
And the Html:
<div class="">
....
<div class="contButton mt10">
<p><a tabindex="" title="acceder" href="#"><span>ver disponibilidad</span></a></p>
</div>
...
</div>
This is the bg Image.
![the sprite][2]
Tried with:
<!--[if IE lte 7]>
<style type="text/css">
/*
.contNombrePrecioHtl .contButton p a{ height:20px; }
.contNombrePrecioHtl .contButton p a span{ height:20px; width:auto; } */
</style>
<![endif]-->
But that didn't solve the problem...
PS: class="mt10" it's only a margin-top:10px;
Any idea how to solve this for the glorious IE6/7?
Try adding white-space: nowrap to .contButton.
change this:
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
white-space: nowrap;
}
I don't think it is a problem with either IE versions, it's probably just the newer browsers being less strict about this particular thing. I haven't tested anything, but "display:inline-block" has helped me sometimes. Still it doesn't seem like the most effective solution. The width seems to be limiting here, you shouldn't give the thing a fixed width if you don't want the text to "jump" into a second line...
can you try to add overflow: hidden to each parent of element with float: left? in this case you will have to add it to each div, p and a. I am not sure whether your actual code is optimal.
Moreover, float: left; and display: inline together make no sense. This might be the reason of the strange behaviour. Delete display: inline (remember about adding overflow: hidden to its parent) and it should work.
Haven't tested though.
UPDATE:
apparently as the author of the question mentions float:left + display: inline fixes IE6 double margin bug for floating elements.
defining dimensions for elements like p oder span is always somewhere between tricky and impossible, because they are inline elements. I'd recommend modifying the surrounding block element div.contButton.
In addition to height you should set overflow to hidden:
.contButton {
height:20px;
width:219px;
overflow: hidden;
}
I'm trying to style a button with the css 'sliding doors' technique, but it isn't working properly. I've only got access to firefox 3 at the moment so this issue may not occur in other browsers but I would like to solve it for firefox as well.
Here's a picture of what the problem is:
http://img131.imageshack.us/img131/3559/buttons.png
As you can see the second side is lower than the first by a pixel and also is not over to the right enough. Here is the code I am using:
button
{
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button span
{
display: block;
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
<button class="important" type="button"><span>Register</span></button>
<button type="submit"><span>Submit</span></button>
How do I fix this problem? I tried relatively positioning the span using top: -1px right: -3px but then the text is mis-aligned.
Thanks.
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I just did sliding doors on a div background, and the code from this site worked perfectly.
Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.
button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }
If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded
However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)
Form elements like buttons are always hard to style, and riddled with minor bugs like these.
Instead of applying the class to the button element itself, perhaps try and apply the button's styling to an extra span element inside the actual button?
In short:
button {
background: white;
border: 0;
}
button div {
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button div div {
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
And HTML:
<button type="submit"><div><div>Submit</div></div></button>
I use DIVs instead of buttons and have a function to build them in-place. It ends up looking like this:
alt text http://fb.staging.moveable.com/samplebutton.gif
inline script call:
<script type='text/javascript'>makeButton("Log in","login()")</script>
code:
function makeButton(text,action) {
document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}
css:
a.titleGen, .btnText, .btnGText {
text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
text-decoration:none
}
.btn {
height:22px;
display:inline;
cursor:pointer;
margin-right:5px;
}
.btnLeft {
background-image:url(/images/bg_btnLeft.gif);
width:3px;
height:22px;
float:left;
}
.btnRight {
background-image:url(/images/bg_btnRight.gif);
width:5px;
height:22px;
float:left;
}
.btnMiddle {
background-image:url(/images/bg_btnMiddle.gif);
width:auto;
height:22px;
float:left;
}
.btnText {
color:#ffffff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:2px;
padding-left:10px;
padding-right:10px;
}