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..
Related
So I was designing some stuff for a Tumblr theme, and I came across a very annoying problem. I was coding the Reblog and Like buttons, and the Reblog button works fine, but for some reason the Like button gives itself like an extra 5px of padding on the bottom. It is not really a serious problem, but it's really annoying to me because I cannot find a way to get rid of it. I tried changing height, max height, positioning and all, and nothing got rid of the extra space at the bottom. It may be some stupid mistake on my part, or maybe It's just supposed to be like that, and I'm not realizing it because it's too late, but any help would be nice.
Here is my test blog too in which I have the theme set up. If you look at the source, or mouseover the Like button you can see.
http://mchickenposts.tumblr.com/
Edit: I could just extend the length of thee li, and add the cursor property so the bottom 5px isn't left out. But I wanted to know How i can get rid of it totally.
Here is my Html Code for the Posts, and the Css too.
.post_reblog_like{
list-style-type:none;
padding:0px;
margin:0px;
display:inline-block;
float:right;
}
.post_reblog_like li{
display:inline-block;
opacity:.7;
}
.post_reblog_like li:hover{
opacity:1;
}
{block:Text}
<div class="post_wrapper">
<div class="post_text">
<div class="post_text_body">
{block:Title}
<a class="PostTitle" href="{Permalink}">{Title}</a>
{/block:Title}
{block:NoteCount}
<a class="post_notes" href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}
<div class="PostBody">{Body}</div>
</div>
<div class="post_date">
{block:Date}
<a title="{DayOfWeek}, {Month} {DayOfMonth}, {Year} # {12Hour}:{Minutes} {AmPm}" class="post_date_text" href="{Permalink}">{TimeAgo}</a>
{/block:Date}
<ul onmouseover="changeClass();" class="post_reblog_like">
<li title="Reblog">{ReblogButton color="white" size="20"}</li>
<li title="Like">{LikeButton color="white" size="20"}</li>
</ul>
</div>
</div>
</div>
{/block:Text}
I believe the issue is related to line-height (currently there is none defined).
.like_button {
line-height: 0px;
}
Change the .like_button to a display: block and then float: left. Elements with display: inline and inline-block always add some space at the bottom for letters like 'y' or 'g'. Hope it helps someone!
I'm building a site that is almost complete. The problem I am having is with IE7 and displaying images that look very distorted/muddy.
First how it looks in all the other browsers I tested, including IE8.
Removed due to link limit on new accounts
And then the muddy one from IE7
Muddy/Distorted Image
After doing some googling it looks like it has to do with the pixel transparency in PNG images on IE7.
First I tried setting a solid background color in the actual background file. This did not work as the image was still very muddy and distorted.
Next I tried specifying a fixed width and height but still the same result. Not sure what else to try at this point.
Any suggestions I am willing to try.
Here is the code pertaining to the element.
.feature {
padding-top:10px;
border-top:solid 1px #ccc;
width:440px;
margin:0 auto;
padding-bottom:5px;
}
.featureimg {
float:left;
width:190px;
}
.featureimg img {
max-height:90px;
max-width:190px;
vertical-align:middle;
}
.featuretext {
float:right;
text-align:left;
width:250px;
}
<div class="feature">
<div class="featureimg">
<img src="images/certipur.png" alt="" />
</div>
<div class="featuretext">
<div class="featurehead red">
Sealed with comfort and confidence
</div>
<p>
TEXT BLOCK
</p>
</div>
<div class="clear">
</div>
</div>
Here is the link to original file http://imgur.com/z2SoV
In case you still care: http://imgur.com/9H9nFHe
I tried using BrowserStack.com to check for the image using IE7 and it didn't look muddy at all. I guess it your VM display settings but i think it shows up perfectly fine. :)
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 have three div tags wraps on my website and in those wraps i have multiple other div tags aligned under each other. When I started working on the right column div tag wrap and when i had put my inner div tag in that one it didnt show on FireFox although I coded it the same as the left and center one.
Code of the right column divtag wrap:
<div id="right_column_wrap">
<div id="advertisement_panel">
<img src="images/advertisement_h1.png" />
<p class="advertisement_panel">Want your website featured here? Mail us at info#Ranklist-Top100.com</p>
</div>
</div>
CSS Code:
#right_column_wrap{
width:312px;
height:auto;
margin:0 auto;
text-align:center;
float:right;
}
#advertisement_panel{
background:url('http://www.ranklist-top100.com/skins/ranklist/images/advertisement_panel-bg.png') no-repeat top;
width:312px;
height:710px;
float:right;
}
.advertisement_panel{
font-family:Arial;
font-size:15px;
color:#FFF;
}
I hope I supplied you guys with enough information =)
Miro is right. Your image gets blocked by 'adblock plus' - this will quite probably be the same for the majority of your users.
Try to use that background file locally and name it something different from 'advertisement_panel'.
I see nothing wrong in Firefox - example.
But i have to turn off adblock plus, because it blocks that image.
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