I have a page here: http://dev.textcube.ch/oneandonly/index.php/galerie/shima/ where the subnav is ok using the style #vertmenu however on another page where the styling and page layout is identical the subnav is pushed to the left http://dev.textcube.ch/oneandonly/index.php/galerie/yuma/
(username: textcube / password: textcube3600 as a login will popup to access the pages)
#vertmenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin-top: 20px;
float: left;
clear: both;
background: url(../images/subnav_bg.png) no-repeat;
height: 180px;
width: 195px !important;
padding: 40px 60px 60px 20px !important;
}
I've no idea of why this is, I've checked the CSS and inspected the elements in Chrome on both pages to see if there is any conflicts and I can't see anything.
Please can anyone help me out?
Thanks
In the second page, you include view.css, which has the following rule:
* {
margin: 0;
padding: 0;
}
This removes the default padding on the ul. You just need to add the following declaration to your #vertmenu .nav rule:
padding-left: 40px;
By checking both the pages the extra thing in the second page is the presence of margin:0; padding:0 via view.css. It causes the layout breaking.
Related
I have searched most of the css files, changed the logo padding in theme.css, but I cannot remove the padding on the bottom of the site logo. There seems to be a 5px padding at the bottom. Is there a way to remove this? Thanks.
Edit: Here is the code in Air theme's, theme.css file, where I can only find logo css references. Thanks again.
.logo {
margin-top: 20px;
margin-bottom: 0;
display: block;
float: left;
padding: 0px;
}
.logo a {
color: #ffffff;
font-family: 'Cinzel', 'Arvo', serif;
font-size: 12px;
font-weight: bold;
}
[[1]: http://i.stack.imgur.com/abkoc.png][1]
The problem is not a padding. The issues comes from browser's interpretation of img in <a> tag. By default all browsers render image with 3px bottom space (and it's not a margin nor padding; just an empty space).
There are 2 ways to remove it:
Float image
Display image as a block
In this case I'd choose the first option.
.logo img {
float: left;
}
I used to have no problem with the css code i have been using. But, after I have changed from using "Lightbox2" to "fancybox", the spacing between the thumbnails and the thumbnail border (when mouse hovering above) disappeared. What has gone wrong?
Compare the problem page after switching to using fancybox (www.lixiao-art.com/test.html ) with the page using Lightbox2 ( www.lixiao-art.com/latest.html )
This is the code I use:
body { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
margin: 0px;
background-color: RGB(181,170,128);}
*{
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal
}
#nav {float: left;
position: fixed;
background-color: RGB(233,231,197);
text-align: left;
font-size: 11px;
color: #645630;
width: 90px;
font-weight: bold;
padding: 100px 20px 100px 30px;
border: none;
min-height: 100%;
}
#content {float: left;
margin-left: 150px;
padding: 15px 20px 10px 80px;
width: 900px;
margin-top: 0px;
border: none;
font: black;
font-size: 11px;
}
#content a {text-decoration:underline}
h2 {height: 2em;}
.footer {
text-align:center;
padding-top: 50px;
padding-bottom: 1em;
font-size: 11px;
}
a{text-decoration: none;
color: #645630;}
a:hover {color: red;}
* {margin: 0;}
html, body, wrapper {height: 100%;}
.ImgBorder img { border:2px solid transparent;
height:100px;
}
.ImgBorder:hover img{ border-color: white}
.ImgBorder {display: block;
float: left;
margin: 30px 20px; }
h5{
clear:both
}
img { border: none; }
Thank you!
In your previous Lightbox2, each image is wrapped in an anchor
<a class="ImgBorder">
and the class ImgBorder has the value margin: 30px 20px
In your current Fancybox, you can just add this missing margin margin: 30px 20px to the class fancybox as each image is now wrapped in an anchor
<a class="fancybox"/>
As I just noticed that there doesn't seem to be any class fancybox already defined, you just have to add
.fancybox
{
margin: 30px 20px;
}
e.g. in your global.css
Update: In case you also want to display the border for the fancybox-images, there are two ways of achieving this: Currently you have both lightbox versions on your test page. For the first image the border is still displayed for hover. Following CSS is taking care about that:
.ImgBorder img {
border: 2px solid transparent;
height: 100px;
}
.ImgBorder:hover img {
border-color:white;
}
for an image markup as follows for your first image:
<a class="ImgBorder" rel="lightbox[gaze]"
href="http://www.lixiao-art.com/work/2014/52.jpg">
<img src="work/2014/52_t.jpg">
</a>
Your current fancybox-markup is like this for your second image:
<a href="work/2014/52.jpg" rel="group" class="fancybox">
<img src="work/2014/52_t.jpg">
</a>
So all you have to add is the border and hover for the fancybox-class:
.fancybox img {
border: 2px solid transparent;
height: 100px;
}
.fancybox:hover img {
border-color:white;
}
It's possible that there are some additional adjustments because of the CSS that fancybox uses, but it's easier if you just check this on your site as I just noticed that you're currently working on it.
At the moment your fancybox images "jump" because you added the CSS
.fancybox:hover
{
border-color:white;
margin:30px 20px;
}
which results in setting this margin on hover (therefore jumping then). I suggest you just try the CSS I posted above, that should work.
Update 2 for the comments follow-up questions:
The attributes class and rel stands for the following:
rel (='related') is an attribute containing information for you previous lightbox. The lightbox script will just fetch the information for e.g. a big image or a link from there.
class: as you noticed, almost all in your css-file starts with a dot (.) followed by a name. This name is the name of the class to which the style information will apply. So .test {color:red;} results in displaying a text red in case it's wrapped in an element with the class test, e.g. a <div>: <div class="test">This is red text</div>.
Update for the margins:
To keep the margins to your images when you remove it for the :hover - the correct way to have the margins is just like that:
.fancybox img
{
margin:30px 20px;
}
As you already have one .fancybox img in your CSS, just add this margin to it, though you can also have these selectors multiple times in a CSS file, it's better to keep the styles applying to an element together.
Thank you very much! You've pointed out the problem with my multiple classes, and I've fixed it accordingly like this:
<a class="fancybox ImgBorder" rel="group" href="work/2014/52.jpg"">
<img src="work/2014/52_t.jpg">
</a>
(instead of making new definitions in my global.css)
But, a small problem shows up: this line shows in red colour in the editor at the backoffice. Is there a problem with this line? but I guess I will open a new thread for this.
Thanks again!
I have a basic menu, made from a horizontally aligned list (<li>), each containing an icon image and some text:
One of the <li> contains an extra image with display: none; so that the icon can be toggled (from a green to a red pepper, in this example.
The problem is that it doesn't align correctly on some browsers, as shown in the above image. My understanding was that in contrast to visibilty: hidden;, an element with display: none; should not affect the position of any other element and should render as if it's not there?
The browsers where it doesn't render correctly are Google Chrome and Safari - but only on MacOS(!?) and IE7 (I know, I know...) on Windows. Every other browser / OS combination I've tested works fine.
Here's the HTML:
<ul class="menu">
<li><img alt="Green Pepper" src="/green.png">li</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
<li id="change">
<img alt="Red Pepper" src="/red.png" style="display: none;">
<img alt="Green Pepper" src="/green.png">
li
</li>
<li><img alt="Green Pepper" src="/green.png">li</li>
</ul>
Here's the CSS:
.menu li {
cursor: default;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
position: relative;
text-align:center;
margin: 0 0 0 -25px;
padding: 8px 0 0 0;
width: 144px;
height: 35px;
display: inline-block;
background-image: url(../bct-white.png);
background-repeat: no-repeat;
color: #0091c1;
}
And for the icon images:
.menu img {
display: inline;
vertical-align: -25%;
padding-right: 6px;
}
I've also had to include a browser hack for IE7 because it doesn't recognise inline-block, coming from a separate stylesheet based on a conditional import (<!--[if lte IE 7]>):
.menu li {
zoom: 1;
display: inline;
}
Although, obviously that style isn't loaded on Chrome and Safari regardless of OS, so can't be causing my issue on Macs.
I know the quickest solution would be to refactor the HTML and the JavaScript manipulation of the show / hide of the icons, but I'd really like to know what causes this issue and how to resolve it.
Update
I've tracked the cause down. Basically, the element style of display: none; on the <img> element overrides the inline from the .menu img rule. Removing that, then toggling between block and inline allows you to reproduce the issue. This is obviously a browser bug, and while the element is not displayed being an in-line or block element should have no effect on the layout.
jsFiddles
Issue with Chrome and Safari on Macs only
Issue with extra CSS for IE7 only
Note! For me, the Fiddle page didn't load properly using IE7, but the direct link for the result iFrame is http://fiddle.jshell.net/z4dU7/3/show/
Bounty update!!!
I've posted one fix below, but it actually introduces the same layout problem in IE9! Please feel free to evolve or improve on my answer - or come to the table with something completely different! :)
Scrap Approach and Use Background Images
http://jsfiddle.net/P5CKC/2/
<ul class="menu">
<li><span>Li</span></li>
<li><span>Li</span></li>
<li><span>Li</span></li>
<li class="change"><span>Li</span></li>
<li><span>Li</span></li>
</ul>
CSS
ul.menu {
overlflow: hidden;
}
ul.menu li {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align:center;
margin: 0 0 0 -25px;
width: 152px;
line-height: 35px;
height: 35px;
background: url(../bct-white.png) no-repeat;
color: #0091c1;
}
ul.menu li span {
background: url(/green.png) no-repeat 5px 6px;
display: block;
}
ul.menu li.change span {
background-image: url(/red.png);
}
CSS2.0 and browser compatibility
The code application I have provided is Css2.0 and should easily work in IE7 and above.
Removed img tags and implemmented aesthetics (images) as backgrounds
Extra span had to be added because CSS2 allows only 1 background image per element
Li tag holds the arrow background; span tag holds the pepper background
Updated id="change" to class="change". UNLESS you are 100% certain that you will only have one #change element, use a class. This is purely styling and it prevents you from having two menu lists on the same page.
Tweaked your CSS styling a bit as follows:
Removed top padding and increased the height. So your li elements are the same height BUT then added line-height: 35px -> this is the best way to vertically center text. Utlizing top padding works but it is prone to poor browser inconsistency.
Change li elements to floats. Floated elements are the most IE7 friendly method! Even IE6 will not bug out but I don't have that old version to test your webpage in. FYI - ul.menu has to have overflow: hidden to clear the floats.
position: relative;
cursor: default;
Unless you changed the defaults, you can keep these two properties out. cursor should be default. Position: relative is unnecessary - you aren't using absolute positioning or anything that warrants its need. Now, you can keep these in your declaration. I just like code to be as "slim" as possible.
final words:
Take a look at my CSS. Notice how I used ul.menu in all my declaration. You may want to get in the habit of doign the same; this provides the developer some insight on what the HTML looks like and more importantly - your css will not get overrided if you decide to add <div class=menu> later on. Specfically .menu img would apply to any image tag within the menu div.
Okay - that's it. Let me know if there are any clarfications.
FYI - seeing as this question has a bounty, if you provide me with the background images I can polish my code to suit your needs 100% - perhaps upload them in an edit of your answer.
There is whitespace between your elements. None of your other list items have that whitespace. Try removing all whitespace between those elements and see if that fixes your problem.
If it does, it just means that your HTML is parsing the content of your <li> as having a line break - which would be why you are seeing an issue. To solve this, wrap the text in your <li> with a <span>. When your browser parses HTML it will automatically trim whitespace between HTML tags and automatically fix the issue (without losing your formatting)
This is an odd one but I could recreate the issue in Firefox v22. The really odd part was that in the jsFiddle if I just hit "Tidy Up" and then hit "Run" and the problem was solved. As Matthew R mentioned this is likely due to the additional white space being removed.
Broken:
Tidy Up, Run, and Fixed
Here's an alternate method using background images:
Working Example
.menu li {
cursor: default;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
position: relative;
text-align: center;
margin: 0 0 0 -25px;
padding: 8px 0 0 10px;
width: 118px;
height: 20px;
display: inline-block;
background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png), url(http://i.stack.imgur.com/dmHl0.png);
background-position: 0% 0%, 44% 75%;
background-size: 128px, 18px;
background-repeat: no-repeat;
color: #0091c1;
}
.menu img {
display: inline;
vertical-align: -25%;
padding-right: 6px;
}
#change:hover {
background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png), url(http://www.chiletownhotsauce.com/images/stories/Red%20bell%20pepper.jpg);
background-repeat: no-repeat;
background-position: 0% 0%, 44% 75%;
background-size: 128px, 18px;
}
<ul class="menu">
<li>li</li>
<li>li</li>
<li>li</li>
<li id="change">li</li>
<li>li</li>
</ul>
I think your issue is with the box model and display:inline-block. When I use display:inline-block in horizontal menus, I also use a clear fix for the parent and float:left; with the children.
In this example of the css, I put some values in the .menu that can be inherited and I used overflow:hidden; to address the clear fix. Then I used float:left; in the li to force them tight and avoid any weird spacing caused by the browsers defaults. And then I changed the vertical-align value to middle for the image. When toggled display:none; with inline, it all looked correct to me. I did not test in all the browsers listed. I also used the first piece of CSS there for the css reset, which may be redundant but I always find it useful on JSFiddle.
* {
margin:0;
padding:0;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
list-style-type: none;
color: #0091c1;
overflow:hidden;
}
.menu li {
cursor: default;
position: relative;
text-align:center;
/* margin: 0 0 0 -25px; */
padding: 8px 0 0 0;
width: 118px;
height: 20px;
display: inline-block;
float:left;
background-image: url(http://modmyi.com/attachments/forums/iphone-4-4s-new-skins-themes-launches/465481d1282224308-classified-hd-cydia-released-goldborder.png);
background-repeat: no-repeat;
}
.menu img {
display: inline;
/* vertical-align: -25%; */
padding-right: 6px;
vertical-align:middle;
}
To resolve the (appearance of) the issue, change the vertical alignment of the icon images contained in the menu:
.menu img {
display: inline;
vertical-align: top;
margin-top: 2px;
padding-right: 6px;
}
On the affected browsers, the additional image (with display: none;) was altering the height of the containing element. Setting the <img> to display: none; meant that the display: inline; setting no longer applied and was positioned underneath the first image.
Just having the extra <img> displaying in-line fixes the vertical alignment, but obviously doesn't fix the issue as the image needs to be hidden without changing the position of the text.
This fix changes the vertical alignment from a percentage (-25%) to a fixed position, avoiding any (spurious) differences in the height of the containing element. I've then set the top margin of the image to get the desired spacing from the top edge of the element.
Update
This fix breaks the display in IE9 - same appearance as IE7 without this fix.
You made a mistake with the line-height
instead of 35px give 23px
<ul class="menu">
<li><span>Li</span></li>
<li><span>Li</span></li>
<li><span>Li</span></li>
<li class="change"><span>Li</span></li>
<li><span>Li</span></li>
</ul>
ul.menu {
overlflow: hidden;
}
ul.menu li {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-align: center;
margin: 0 0 0 -25px;
width: 152px;
line-height: 23px;
list-style: none;
height: 35px;
background: #ccc;
color: #0091c1;
}
ul.menu li span {
background: url(http://i.stack.imgur.com/dmHl0.png) no-repeat 5px 6px;
display: block;
}
ul.menu li.change span {
background-image: url(/red.png);
}
check the output
jsfiddle-link
I had the same issue with display:none; breaking my layout. I ended up just removing the style and using jQuery's:
$(".element").show();
$(".element").hide();
My food menu works perfectly in Firefox and IE, but not at all on Chrome. The dt tag overlaps with other dd tags. I have tried to search from the question list, but cannot get the right one. I many times tried to play around with float and overflow, but have been unable to address this problem.
Your suggestions would be appreciated. I really want to stop scratching my head, since I have been doing this for several months.
#menucontent dt {
float: left;
padding-right: 5px;
font-weight: bold;
}
#menucontent dd.price {
float: right;
color: #E1DEDE;
}
#menucontent dd.ingredients {
float: left;
width: 100%;
padding: 0px 0px 5px 0px;
color: #FAD98A;
}
My food menu can be clicked from this link
https://dl.dropbox.com/u/13748701/dinner.html
Its CSS source is here https://dl.dropbox.com/u/13748701/style.css
First of all: get rid of all the empty <p>-tags! They are not necessary. Want to created spaces between elements? Use margin!
For your problem: add a clear: both; to h2. So you get this:
h2 {
padding: 3px 15px 0px 0px;
font-weight: normal;
font-size: 20px;
color: #F7E4B5;
clear: both;
}
Try add overflow: hidden; to your dl element in css :
#menucontent dl {
overflow: hidden;
}
I have a menu div that appears just fine in IE9 and Firefox, but in chrome and IE8, the contents of the div are not following actual div itself when the div is moved:
IE9/FF:
Chrome:
As far as I can tell, i don't have any css conflicts or issues with flow. I may be missing something though (obviously). Any help would be greatly appreciated. TIA
Here is the current div hiearchy:
<div id="mainBody">
<div id="mainMenu" class="mainMenu">
<asp:Menu class="menuItems">
<--- menu items jargon here --->
</asp:Menu>
</div>
</div>
And the css:
body
{
background-color: #E7EDEB;
}
.textBox
{
margin: 1px;
}
#mainBody
{
border: 1px solid #000000;
width: 1000px;
background-color: #FFFFFF;
margin-left: 10%;
margin-right: 10%;
padding: 0px;
font-family: Calibri;
letter-spacing: .03em;
}
.mainMenu
{
border: 1px solid #000000;
background-color: White;
margin: 0px;
position: relative;
width: 600px;
left: 50px;
bottom: 25px;
height: 30px;
}
.MenuItems
{
vertical-align: middle;
font-family: Calibri;
font-size: large;
text-decoration: none;
text-align: left;
color: #000000;
margin: 3px;
}
div#mainContent
{
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin: 0px;
width: 1000px
}
UPDATE:
I removed the asp menu control from the div and replaced it with plain text. It looked much more like you would expect, so it's leading me to believe it has something to do with the control itself. I haven't applied any styles to the control itself so im still lost.
Try adding styling to your skiplink:
#ctl04_SkipLink {
position:absolute;
left:-9999px;
}
It's caused by your hidden anchor before the ul. Haven't figured out why yet.
EDIT: Actually, it appears its your hidden image inside that anchor.
Being an ASP control issues, I didn't think I'd ever figure it out. It turns out that it WAS an issue with the way ASP was rendering the control. Thanks to Rob, we were able to narrow it down to a SkipLink. Since the page is personal, I don't need to worry about skiplinks so I opted to disable it completely. The way to do it in ASP is simply to set SkipLinkText to "" in the menu control.
For anyone else that comes across this, there are a few other tricks shown here:
http://forums.asp.net/t/976796.aspx/1
Thanks guys
Try to add
top:0;
to .mainMenu and reload it a few times ;)