PNG Images distorted muddy in IE7 - html

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. :)

Related

HTML CSS Cannot See Element OpenSeadragon Viewer

I am missing something simple I think. I am using OpenSeadragon viewer (OSD) and would like to insert some floating text over the images. No matter what I do, the viewer is on top of everything. I can see the text flash, but then the viewer hides it all. The HTML with the viewer is:
<body>
<div class="demoarea">
<div id="toolbarDiv" class="toolbar">
...
</div>
<div id="contentDiv" class="openseadragon"></div>
</div>
</body>
I have created a number of tags in an attempt to display text floating over the viewer:
#watermark {
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
font-size:200px;
color:#CCC;
font-weight:bold;
letter-spacing:40px;
position:absolute;
z-index:1000000;
top:20%;
left:15%;
opacity:0.5;
filter:alpha(opacity=50);
}
.watermark {
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
font-size:200px;
color:#CCC;
font-weight:bold;
letter-spacing:40px;
position:absolute;
z-index:1000000;
top:20%;
left:15%;
opacity:0.5;
filter:alpha(opacity=50);
}
<p>Top</p>
<div id="watermark" style="display:block;">Top</div>
<h1>Top</h1>
<div id="watermark" class="watermark">
Top
<span>Top</span>
</div>
I have tried to make the text as obnoxious as I can so that if it flashes quickly, I can still see it. This is exactly what is happening. Multiple instances of the "Top" text is visible for a split second and then is covered up by the viewer.
When I look at the CSS elements of the viewer, the z-index of the fullpage class is 999999. I set my CSS z-index to 1000000 so it should be on top, but it isn't.
Anyone have other ideas?
Thanks.
Very interesting. It is as though the viewer is removing all elements it doesn't recognize. When I inspect the HTML after it is drawn, the elements I add are no where to be found. I am not sure my assessment is correct, but I added the Div using jQuery after the viewer is drawn and it worked like a champ.
if (!watermark) {
watermark = $('body').append($('<div/>', {id: 'watermark', class: 'watermark'}));
} // iif

Custom Scrollbars in Firefox

From what I understand and having had searched Google quite recently, it appears custom scrollbars are still not implemented in Firefox.
The issue I am running into is the fact that three of my coworkers all have the custom scrollbars in Firefox, yet I still have the default scrollbar.
I read the recent release notes for the versions they have (53 and 54) but say nothing about scrollbars. When checking the Mozilla developer page (https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar), it shows the scrollbar page was updated on Aug 1, 2017 - so I am wondering if partial support was included in a release, or if something else is happening here.
.scroll_container {
background-color:#000000;
width:421px;
height:420px;
color:#999999;
border:2px solid #000000;
border-radius:10px;
overflow:hidden;
text-align:justify;
}
.scroll_content {
position:relative;
width:400px;
height:414px;
top:-17px;
padding:20px 10px 20px 10px;
overflow-y:auto;
}
a {
color:#C800C8;
font-size:1.2em;
float:right;
}
.top_bottom_mask {
position:absolute;
overflow:hidden;
width:17px;
height:10px;
}
.left_right_mask {
position:absolute;
width:0px;
border:1px solid #000000;
}
.corner_top_mask, .corner_bottom_mask {
position:relative;
left:-2px;
border:6px solid #000000;
height:20px;
width:13px;
border-radius:16px;
}
.corner_top_mask {
top:-3px;
left:-4px;
}
.corner_bottom_mask {
top:-18px;
left:-4px;
}
<div class="scroll_container">
<div class="scroll_content">
<h2>CSS Scrollbar Style</h2>
Many designers dislike the way scrollbars look in browsers, and wish there was a way to make them look at least somewhat more appealing, possibly even blending in with the rest of the web page.<br /><br />
Some browsers support different ways to customize colors, none of which (to my knwledge) are W3C compliant. Also none of them seem to work in Firefox at all, which is another downside for many of us.<br />
There's also an option to use JS or jQuery scripts for completely custom scrollbars, many of which have problems when it comes to dynamic content and sometimes even images loading within those scrolling containers.<br /><br />
I'm just a novice enthusiast myself, so the following example may very well be even worse than some of the methods mentioned above. It's also a bit messy to begin with, but it doesn't use any scripting, it's done using css standard styles, and not too difficult to understand.<br />
Basically, all I do is mask part of the existing browser scrollbar, to hide up and down buttons, left and right edges, and round up the top and bottom track for a little extra visual effect. You can do without those and keep them square instead.<br /><br />
To achieve this effect, you need 2 containers. The outer container, set to desired dimensions to fit into your web page layout. This container includes the inner container (with content) as well as masking divs.<br />
The inner container is where you put all of the content. This one is pushed up, over the edge of outer container, far enough to hide the up button (top:-17px), and its height is greater than that of outer container, so the bottom button goes out of the frame as well. After that you need to adjust padding so the actual content doesn't go out of frame as well.<br />
Last thing to do is properly position the masking divs to hide the undesired parts of the browser scrollbar.<br /><br />
To visually check what actually happens, move to CSS part of the screen and change border colors from 'solid #000000' to 'solid #FF0000' for example for classes <i>.left_right_mask</i>, <i>.corner_top_mask</i> and <i>.corner_bottom_mask</i>.<br /><br />
http://www.digital-madness.com
<br /><br /><br />
</div>
</div>
<div class="top_bottom_mask" style="left:413px; top:10px;">
<div class="corner_top_mask"></div>
</div>
<div class="left_right_mask" style="left:413px; top:11px; height:418px;"></div>
<div class="left_right_mask" style="left:428px; top:10px; height:418px;"></div>
<div class="top_bottom_mask" style="left:413px; top:420px;">
<div class="corner_bottom_mask"></div>
</div>
<div style="position:absolute; top:10px; left:450px;">
Browser support:
<ul>
<li>Google Chrome</li>
<li>Firefox</li>
<li>Safari</li>
<li>Opera</li>
</ul>
From the technical point of view, this also works in IE. the only problem are those grotesque up and down buttons, which are twice as big as any other browser uses. Not the most pleasing quality of that browser to be honest.
</div>

Hyperlink appears to have leaked out of image

I am learning HTML and CSS at the moment but having a bit of trouble with my code.
If anyone is able to help it would be much appreciated.
Here is my website design - http://puu.sh/5D4yG.png
And here is an image of the portion of my website I am having trouble with.
http://puu.sh/5D3Rr.png
If you look between the two images at the top you will see a very tiny blue underline in the gap.
Then if you look under the heading there is another purple underline.
I have not coded for anything to be underlined so am not sure why it has appeared.
The code is as follows:
CSS
#currentprojects
{
padding:5px;
width:75%;
height:auto;
margin:0px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
#projects
{
padding:5px;
width:75%;
height:auto;
margin:10px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
#latestvideos
{
padding:5px;
width:75%;
height:auto;
margin:10px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
HTML
<div id="currentprojects">
<div align="center"><h1>current projects</h1></div>
</div>
<div id="projects">
<a href="https://itunes.apple.com/gb/app/ritgk/id581734892?mt=8"><img class="ritgk" src="images/ritgk.png" onmouseover="this.src='images/ritgkhover.png'" onmouseout="this.src='images/ritgk.png'" alt="RITGK iOS App" width="296" height="168"/>
<a href="http://www.redbubble.com/people/f7james/works/10680438-imagine-dragons-night-visions-poster"><img class="imaginedragons" src="images/imaginedragons.png" onmouseover="this.src='images/ imaginedragonshover.png'" onmouseout="this.src='images/imaginedragons.png'" alt="Imagine Dragons - Night Visions Poster" width="296" height="168"/>
</div>
<div id="latestvideos">
<div align="center"><h1>latest videos</h1></div>
</div>
There is also another problem I am having with the above code where, rather than just the Imagine Dragons button linking to my RedBubble page with the Imagine Dragons poster on, for some reason the whole blue section in the image below links to it.
http://puu.sh/5D4EE.png
If anyone could help me with these problems I would be extremely grateful as I can't seem to get my head round why.
Thanks
The single space character between the images is being given a hyperlink underline.
You can get rid of this either by removing whitespace between the images in the html, closing the link tag or styling the link with
text-decoration: none
I suspect you didn't want one link to continue across anyway which brings us to...
It looks like you're missing the closing anchor tag from your links (</a>)
Links (aka anchors) should be in this format...
<a href="..." ...> {Thing that is clickable} </a>
Try...
<div id="projects">
<a href="https://itunes.apple.com/gb/app/ritgk/id581734892?mt=8">
<img class="ritgk"
src="images/ritgk.png"
onmouseover="this.src='images/ritgkhover.png'"
onmouseout="this.src='images/ritgk.png'"
alt="RITGK iOS App"
width="296"
height="168"/>
</a>
<a href="http://www.redbubble.com/people/f7james/works/10680438-imagine-dragons-night-visions-poster">
<img class="imaginedragons"
src="images/imaginedragons.png"
onmouseover="this.src='images/imaginedragonshover.png'"
onmouseout="this.src='images/imaginedragons.png'"
alt="Imagine Dragons - Night Visions Poster"
width="296"
height="168"/>
</a>
</div>
Although getting fully W3C compliant html can be time consuming with browser incompatibilities, it's always useful to run your page through the W3C validator which will find almost all syntax errors.

HTML Div tag not showing in Mozilla FireFox

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.

weird IE bug?

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..