I have some drop down menus that don't seem to be aligning nicely in IE8 - they are aligning well in Firefox 3 and IE7. Specifically, the dropdowns seem to be ignoring my right:0; style. A picture says a thousand words so this is what it looks like:
Misaligned menu http://lh5.ggpht.com/_gXJgvXl6JFY/TEf9v1BmECI/AAAAAAAAAA4/iGF-Wi8CTyU/misaligned%20menu.png
As you can see, the right side of the dropdown should be aligning with the right side of the highlighted "admin" li but it appears to be in the middle.
The important dropdown css styles are:
.ajs-menu-bar .ajs-drop-down {
left:auto;
right:0;
}
The important "admin" li styles are:
.ajs-menu-bar .ajs-menu-item, .ajs-menu-bar .ajs-button {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
}
And the HTML for that bit is:
<li class="normal ajs-menu-item">
<span><span>admin</span></span>
<div class="ajs-drop-down" style="width: 111px;">
<ul class="section-user-status first" id="user-menu-link-user-status">
... bunch of <li>s
</ul>
</div>
</li>
If anyone could shed some light that would be great, just driving me a bit nuts :(.
Thanks in advance!!!!
Cheers,
Jenny
I would recommend a separate stylesheet for IE8 aimed specifically at the menu. This is the only way to make changes for IE8 and not the other browsers that display fine.
The code below probably isn't exact (with regard to singling out a browser), but it should give you an idea what to do...
<![If lt IE7]>
<link href="ie8.css" type="text/css" rel="stylesheet" />
<![End If]-->
Once you've done that, copy the css for your menu into this file (as is) and change the margins for the drop down:
.ajs-menu-bar .ajs-drop-down {
left:auto;
right:0;
margin-right: 40px !important;
}
If changing the right margin as shown here doesn't work, try setting the left margin to a negative value.
I know, the idea seems ludicrous, but in my research into Liquid Design, I've found that it's sometimes the ONLY way to get something right.
HTH
Related
can any body explain me the out put, which my code is genrating, as it
driving me nuts, there is no syntax error, i am following the tutorial
on you tube and i was able to genrate the right out put with this
code, but today i decided that i will understood this code fully, and
it driving me crazy
**Note: No syntax error, just looking for explanation about the out put, and please read the comment in the code
First look at the code html**
<html>
<head>
<title>TODO supply a title</title>
<link rel="stylesheet" href="menu.css"></link>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" >
<ul id="menu">
<li >Home</li>
//This section is giving me trouble, please see below i explain my problem in detail there
<li >about
<ul class="hidden">
<li >who are we</li>
<li >what we do</li>
</ul>
</li>
//This section is giving me trouble, please see below i explain my problem in detail there.
<li >portfolio
<ul class="hidden">
<li >photography</li>
<li >web & interface design</li>
<li >illustration</li>
</ul>
</li>
<li >news</li>
<li >contacts</li>
</ul>
</body>
</html>
and this is my css
/*strip styling from the list*/
ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
}
li{
display:inline-block;
float:left;
margin-right:1px;
}
//only this section of the code is driving me crazy, and in the explanation i type this section again and again. Please see below in there i explain my problem in detail.
li a {
display:block;
}
Problem if you look at the out put in this link
https://codepen.io/arif_suhail_123/pen/pwdYXp
i am confused about this-- look at the about section, i was expecting who we are and what we do, to appear as block element, as i gave li a {display:block} but they dont, they are appearing as inline block element or inline element, i am not sure,
but i get more confused when i see the next portion portfolio, as in there, all the li are appearing as block element, means photography, web & interface design and illustration appear on the next line, which i was accepting, after giving this style li a {display:block}
and after that i completly lost my mind when i added min-width property,
see the link https://codepen.io/arif_suhail_123/pen/ZyaZEj i changed nothing, i only added in li a {} min-width, so my style is this li a {display:block; min-width:140px;}
i still have the problem, what we do appear under the portfolio, this problem i desribed already(in the last paragraph), but after adding min-width:140px; i have new problem; if you look at the out put, web & interface design appear under the news, first of all i did not expected it to appear there, and second of all if you read the html code web & interface design is second li means why it appearing in this order first li -- photography, than third li -- illustration and second li -- web & design, under the news??
Can any body please explain me,
and last of all, what i understand about the absolute positioning is this, that it take the element out of normal flow, and put it back at the given position, i ran one example, and it confirm what i think may be i am wrong but have look https://codepen.io/arif_suhail_123/pen/LLOaXv
on this link third box did not appear, as i was expecting it, not to appear,
and about the block element, i understand that they suppose to appear on the new line.
see these two picture i think my question will become more clear.
Absolute Positioning - Take the Width of Parent
Ok so I looked through your code and I made a small example out of it. I took out some things to make the example more clear (and because of width limitations in these posts).
Ok, first, look at the background colors I put on both of the <ul> lists. Your sub-lists are in red. Your main <ul> is in yellow.
Now you are correct in saying that position: absolute; takes the element out of the "flow" of other elements in order to display them as usual. Absolute positioning takes a lot of special attention.
Run the code and look at the words "Who are we". Now this makes you think, why does "photograpy" appear next to it? What happened to "what we do"? Its behind it. The reason this occurs is because both of those lists are positioned absolutely under their parent element. Without giving anything like top or left they are just going to overlap eachother and the latter ends up displaying ontop of the previous list. Absolutely positioned elements don't care what is next to them or if they overlap something. They go where ever you tell them to and thats typically what absolute positioning is for. You tell it to break away from normal flow, and you give it a specific location to appear.
Play around with the code, delete "photography" and "illustration" and run it again. You'll see that "what we do" was there all along, just behind it.
Also see Russell's Answer.
ul{
margin:0;
padding:0;
list-style-type:none;
position:absolute;
background-color: yellow;
}
ul ul{
display: block;
padding: 5px;
background-color: red;
}
#secondList{
background-color: pink;
}
ul li{
float:left;
margin: 5px;
width: 120px;
}
ul ul li a{
display: block;
}
<ul id="menu">
<li>Home</li>
<li>about
<ul class="hidden">
<li>who are we</li>
<li>what we do</li>
</ul>
</li>
<li >portfolio
<ul class="hidden" id="secondList">
<li>photography</li>
<li>illustration</li>
</ul>
</li>
<li>news</li>
</ul>
i am confused about this-- look at the about section, i was expecting who we are and what we do, to appear as block element, as i gave li a {display:block} but they dont, they are appearing as inline block element or inline element, i am not sure,
They do appear as block elements. I think the 'problem' is that you have li declared as inline-block elements. So you have block elements in a container set to inline block which effectively makes them display as inline-block.
but i get more confused when i see the next portion portfolio, as in there, all the li are appearing as block element, means photography, web & interface design and illustration appear on the next line, which i was accepting, after giving this style
This is being displayed the same, but the pen you entered has some kind of arbitrary width assigned to it. I'm not sure if it's because of the viewport settings or not, but try shortening some of the link names and you'll see it's actually displaying them the same as the other list. IE inline-block just like was specified.
Can any body please explain me, and last of all, what i understand about the absolute positioning is this, that it take the element out of normal flow, and put it back at the given position
Absolute positioning takes the element out of normal flow and positions it relative to it first positioned parent. The browser does not set aside space for the element either.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
I'm not 100% sure if I understood the problem but I'll give it a shot:
position: absolute;
makes the element ignore every single element. That is what makes them on top of each others. It just displays whereever you tell it to display. Wich is in the top left corner by default. And that's also why there is an
z-index: ...;
the z-index indicates wich layer the element is displayed on, for example z-index: -10; makes it on layer -10 and an element with z-index -9 would display on top I think(pretty sure, otherwise its the opposite) there are infinite layers btw
Hope this is what you were looking for
I've been working on this for the past few hours and I give up. I cannot figure this one out.
I have an image (header logo), followed by a nav bar. There is a 2-3px space just below the image. I've systematically eliminated every bit of externally referenced CSS, and then added some inline CSS to try and fix the problem. Here's what I have right now:
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Sci-fi's Big Mistake</title>
</head>
<body style='margin:0px; padding:0px; border:1px solid green;'>
<img src='/images/farscape.jpg' alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>
<span style='border:1px solid blue;margin:0px; padding:0px; '>text</span>
<ul id='menu' class='gold' style='margin:0px; padding:0px; border:1px solid red;'>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Products</a></li>
<li><a href='#'>Contact</a></li>
</ul>
Shouldn't have cancelled this.
</body></html>
Here's a screenshot of the page, and what I'm seeing on my system (Win, xp, same in IE8 as well as FF 13)
http://picturepush.com/public/8737985
There you got it.
http://jsfiddle.net/dennym/XBdfk/
Removed the <br> and added a display:block to your image.
The space is gone.
The Problem was the <br> it has a min margin which u cant remove... i guess.
Also you have to add a display:block to your image, so the text appears at the bottom.
(Also removed a little error in your quotation marks)
The image tag code is not correct you didn't close the alt attribute so the styles aren't taking affect and you should be using double quotes
<img src='/images/farscape.jpg' alt='Farscape style='margin:0px; padding:0px; border:1px solid red;'><br>
You also may want to remove the <br> and set display:block; on the image
There is no gap for me using Mac OS X/Chrome. My guess would be that your browser is setting a line-height on the span other than 1.
Try using a reset stylesheet, http://meyerweb.com/eric/tools/css/reset/. Also Firebug will easily allow you to hover over elements to see what sizes elements to pin-point where the padding is coming from.
If understand you correctly, the problem is caused by the fact that images are not only inline elements like text, but are also considered to be 'text'. Text is written with a baseline. Most letters align on this baseline, but some, like j, g and y not. So some pixels of space are included at the bottom, below the baseline when a text is rendered.
You can put this off by adding
line-height:0px;
to your image tag.
Another bizarre result of this image-equals-letter idea is that images that should be aligned side by side show a gap. Indeed: there are spaces between letters! You can solve this by adding to that sme image tag:
font-size:0px;
Another way to solve that problem you mention would be to make that header image the background image of a div with the same dimensions. Div's are only containers and have no font-like properties.
Hope this helps!
I'm not really good at coding html or css, so I need some help.
In short, when you hover over the triangle, it will display the dropdown menu with the list of options (user control panel, private messsages, etc). What's the best way to achieve this using html, css, etc? If you could provide the code, I'd much appreciate it.
Cheers, Spencer
I can't provide you with all the code, but here's what I think to be a good help.
<div>
Welcome back dude!
<div id="triangle">
<div id="menu">
<!-- Here goes the menu links whatever -->
</div>
</div>
</div>
Please notice that the menu div is contained in the triangle div.
Then in your CSS code, write something like this:
#menu { display:none; position:absolute; }
#triangle { position:relative; }
#triangle:hover #menu { display:block; } /* This is what makes the menu show up. When you hover triangle (or anything in it, like menu) then the menu is visible */
The position attributes will be for the #menu not to alter other elements in the page when it shows.
Then you'll have to make adjustments to the triangle menu, if needed.
I am trying to put social buttons facebook and tweetmeme in our site. I liked the way it's done in yahoo sites. Please look
Yahoo Link
I looked at yahoo code, but the implementation style is very difficult to understand. It would be great if someone can help me in html/css coding.
Thanks.
Update
This is the code I have so far.. The issues I am having is Yahoo customized the css by changing the facebook and tweetmeme css behavior. Please check the attached image and compare with it. The code I am using is
<a name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<script type="text/javascript">
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Please let me know, can we have exactly they have. I liked the look and feel of that. :)
Thank You.
I solved this for http://www.easynda.com using tips from http://neilgoodman.net/2012/01/14/making-social-buttons-line-up-in-a-row-in-css/ and some refinements.
I started by trying to use margins or padding in CSS to adjust the position of the social buttons, but that didn't work. Each button has slightly different margins and padding, which meant my adjustments never worked right and didn't look the same across browsers.
What's needed is to be able to accommodate the variation between buttons and to get them to stay where I put them in my HTML. The solution to is using floats. Max Design has a nice tutorial on floats with examples here: //css.maxdesign.com.au/floatutorial/introduction.htm.
Following the tips from Neil's site got me to here - but with clear problems.
(I'd post an image, but don't have enough reputation points yet).
The LinkedIn button sits at the top of its DIV while the FB buttons sits in the middle of it's DIV as seen in the first image. There are a couple of issues to note:
a: the FB share button width is minimum 90px per //developers.facebook.co.... All well and good, however, the width is dynamic based on the number of shares one has.
b: there is no margin between the FB share and LI share button -
c: the LI share button needs more width, and dynamic width as it will get it's own count as time goes on.
c: 20 px height is not enough for FB - even thought the FB button is only 20px, the JS adds pixels above the visible button. Also note that the bottom of the count bubble is cut off
d: and most obvious of all, the vertical positioning with LI riding high.
I solved the problem by floating a container holding the buttons with a line-height if 1 and using some CSS to float the buttons displayed inline with a min width, min height, and left padding.
The results are what was live as of the date of this posting (again, need reputation points to post images and more than two links)
Here is my HTML and CSS:
<div class="social-button-container" style="position: relative; z-index: 999;">
<!-- Facebook -->
<div class="social-button fb-like" data-href="http://easynda.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
<!-- LinkedIn -->
<div class="social-button">
<script type="IN/Share" data-url="http://www.easynda.com" data-counter="right"></script></div>
<!-- Twitter -->
<div class="social-button">
</div>
<div style="clear: both;"></div>
</div>
.social-button-container {
/*background-color: red;*/
/**
* This is a nice CSS trick that allows you to clear an element
* without having to add extra elements to your HTML. This helps
* separate content from design, which should always be an architectural
* goal.
*/
float: left;
line-height: 1;
}
.social-button {
float: left;
min-width: 100px;
display: inline;
min-height: 22px;
padding-right: 5px;
}
They are using an unordered list at the elements to show the buttons.
A UL is mostly used to show a list of items vertically but you can use CSS to make the items appear next to each other instead.
<ul>
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
I think the above would work ok.
All you need to do then is right align it.
<div style="width:400px">
<ul style="float:right">
<li style="display:inline">One</li>
<li style="display:inline">One</li>
</ul>
</div>
Don't forget to use classes instead of inline styles like I have here.
Well, you basically just have to deal with the fact that one is an inline (a) element, the other a block (iframe) element, after that it becomes quite easy, just test that:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#fb_share, iframe {
display: block;
float: left;
line-height: 2em;
margin: 0 1em 0 0;
}
</style>
</head>
<body>
<a id="fb_share" name="fb_share" type="button_count" share_url="http://www.yahoo.com" href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
<script>
tweetmeme_url = 'http://www.yahoo.com';
tweetmeme_style = 'compact';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js"></script>
</body>
</html>
Put your social media buttons into parent divs and give those divs an id each.
Target the inner iframe elements, e.g:
#fblikeblock iframe, #gplusblock iframe {
vertical-align: top !important;
}
where fblikeblock and gplusblock are the parent divs.
and use this on your parent divs:
#fblikeblock, #gplusblock {
display: inline !important;
position: relative;
zoom: 1;
}
I've spent too much time trying to get this to work on IE 7. It's working on ff and the only errors coming up on validator are missing alt tags for images (9 errors).
The entire site works except for this one part, and so I'm wondering if there's a weird float bug that I'm unaware of.
I have a div with an image inside of it. Under the image I have 3 divs that contain images. There is a slight gap between the image at the top of the div and the divs under it
Here's my code:
<div class="header_banner">
<img src="html_images/banner.jpg" />
<div class="header_left"></div>
<div class="header_main" id="header_menu">
<ul>
<li>Home</li>
<li>Studio</li>
<li>School</li>
<li>Events</li>
<li>Shop</li>
</ul>
</div>
<div class="header_right"></div>
</div>
Here's the CSS:
.header_banner
{
float:left;
width:531px;
}
.header_left
{
float:left;
background-color:#003399;
background-image:url('../html_images/header_left.jpg');
background-repeat:no-repeat;
background-position:48px;
width:55px;
height:33px;
}
.header_right
{
float:left;
background-image:url('../html_images/header_right.jpg');
width:7px;
height:33px;
}
.header_main
{
float:left;
background-image:url('../html_images/header_main.jpg');
background-repeat:repeat-x;
width:426px;
height:33px;
}
I wouldn't be surprised if I'm just missing something, but I've read through it 3 times now.
Any ideas? (I've setup a background-color to see exactly where the gap is)
Thanks
I would recommend using a reset stylesheet (or insert reset styles into the top of your stylesheet). It can help you avoid all sorts of issues like the one you are seeing.
You're right; it's probably an Explorer bug. Here's some more info: http://www.positioniseverything.net/explorer/floatIndent.html
It seems to be an issue with how IE handles margins. See if defining a margin (0px in this case) helps.
Have you tried adding style="display:block;" to your img element?
I also remember reading that whitespace after an tag can cause problems. Try adjusting your markup by removing the whitespace:
<div class="header_banner"><img src="html_images/banner.jpg" /><div class="header_left"></div> etc..