WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > IE Item not floating where it should and other issues..

Reply
  Thread Tools Display Modes
Old 11th August 14, 07:54 PM   #1
eyedia
WLC Member
 
Join Date: Aug 2014
Posts: 4
Default IE Item not floating where it should and other issues..

I'm having some strange IE issues:

I'm having an image that in most other browsers, sits where it should, but in IE (8-11), Windows Chrome and Safari (unsure what versions for those two but i've been told) the image isn't floating in line with the others but drops below. This image is on the home page in the box with the videos that says "watch more Inside Oaktree Videos"

Also, in IE 8, a double logo appears at the top, and the footer doesn't block out horizontally as it should, but instead spans full width with each block.

Not sure what's going on, but some help is much appreciated!
The website is http://www.oaktreehealth.ca
eyedia is offline   Reply With Quote
Old 12th August 14, 12:00 AM   #2
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: EI Item not floating where it should and other issues..

Not sure which image you're talking about. Looks fine for me in Chrome.

Let's go this route: Check your analytics to see if it's even worth your time to worry about IE8. I'd bet the visitor numbers are so low it doesn't even matter. Besides, IE8 and below users have to be used to the web looking like hell by now. I mean, they've waited this long to upgrade, they clearly don't care. Next, the Webkit/Blink and Mozilla rendering engines are the most standards compliant. They render very closely, so I'd consider that if it looks fine in one and not the other, you may have made a mistake somewhere, rather than it being a rendering difference.
__________________
Sometimes, I'm astounded by my own eloquence.
ronaldroe is offline   Reply With Quote
Old 12th August 14, 03:05 PM   #3
eyedia
WLC Member
 
Join Date: Aug 2014
Posts: 4
Default Re: IE Item not floating where it should and other issues..

Thanks for the reply ronaldroe!

Unfortunately, as we do have a higher older generation as clients, we still do have a good amount of customers using EI... including my boss who noted this issue in the first place.

I completely agree that IE 8 especially, is complete bunk for web designers and yes I also agree that anyone using it must be used to seeing websites that look like **** (when they look great in most other browsers.

The majority of the 'strange issues' are IE 8, so i'm okay letting that go, but the floating image is still an issue for a few browsers including IE 8-10.

Not sure why it's even happening, there is enough extra room for it to sit there. Anything apparnt in the coding that isn't IE compatible?
eyedia is offline   Reply With Quote
Old 13th August 14, 05:31 AM   #4
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,710
Default Re: IE Item not floating where it should and other issues..

Put #right-header above .logo in the HTML.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 13th August 14, 01:46 PM   #5
eyedia
WLC Member
 
Join Date: Aug 2014
Posts: 4
Default Re: IE Item not floating where it should and other issues..

Quote:
Originally Posted by meesa View Post
Put #right-header above .logo in the HTML.
Hi Meesa. I did nove that div up, but it didn't change anything. I figured out why I had the double header though, it seams IE 8 is grabbing moble elements and doubled up on the logo by pulling the retina ready logo as well. So I just removed the retina logo completely and it's now fixed.

Still having that issue with the floating image though...

I attached a screenshot. This happens in all versions of IE as well as older versions of Safari and Chrome as well, so it is something I want to fix.

Here is the code via wordpress that is entered in a page and drawn from that:
You can see the thumbnails are drawn from a shortcode for a plugin. Wondering if this somehow causes the issue, or if it's how I have the area structured? Can it be something with how my Div's are structured in this ares?
Code:
<div class="custom-video-box">
     <div class="main-video-box">
          <div class="main-video">
	          <iframe width="560" height="315" src="//www.youtube.com/embed/tes46e4Jvb8" frameborder="0" allowfullscreen></iframe>
          </div>
          <div class="video-box-right">
               <p style="font-size: 20px; text-transform: uppercase; color: #f47820; margin-bottom: 0px"> Sign up for exclusive content!</p>
               <h5>Recieve exclusive content including contests, tips, articles and deals!</h5>
               <!-- Begin MailChimp Signup Form -->
               <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
				<style type="text/css">
				#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;  width:300px;}
				/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
				  We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
				</style>
				<div id="mc_embed_signup">
					<form action="//oaktreehealth.us6.list-manage.com/subscribe/post?u=0ead93adc3&amp;id=1bf89cee05" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
				
						<div class="mc-field-group">
							<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
							</label>
							<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
						</div>
						<div class="mc-field-group">
							<label for="mce-FNAME">First Name </label>
							<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
						</div>
						<div id="mce-responses" class="clear">
							<div class="response" id="mce-error-response" style="display:none"></div>
							<div class="response" id="mce-success-response" style="display:none"></div>
						</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
						<div style="position: absolute; left: -5000px;"><input type="text" name="b_0ead93adc3_1bf89cee05" tabindex="-1" value=""></div>
						<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
					</form>
				</div>
				
				<!--End mc_embed_signup-->
				<div style="clear:both; height: 10px"></div>
				<p><small>We hate spam too. Your email is safe with us.</small></p>  
			</div>
     </div>
     <div style="clear:both;"></div>
     <hr >
     <h5>Watch our most recent INSIDE OAKTREE episodes!</h5>
     <div class="custom-video-thumbnails">
          [workbox_video_YV_list gallery_name="Home Gallery"]
     </div>
     <div class="video-thumb-label">
          <a href="http://www.oaktreehealth.ca/inside-oaktree/"><img src="http://www.oaktreehealth.ca/wp-content/uploads/2014/07/watch-more-videos.png" alt="Watch More Inside Oaktree Episodes" width="120" height="90" /></a>
     </div>
     <div style="clear:both;"></div>
</div>

Here is the CSS for those specific elements

Code:
/***************
CUSTOM VIDEO FRAME WITH THUMBS
****************/

.main-video {
	float: left;
	width: 560px;
}

.video-box-right {
	float: right;
    padding-left: 20px;
    width: 360px;
}

.video-box-right #mc_embed_signup {
	background: none !important;
    width: 350px;
    margin-top: 0px;
}

.video-box-right #mc_embed_signup .mc-field-group label {
    margin-bottom: -10px;
}

.video-box-right #mc_embed_signup .mc-field-group .asterisk {
    position: static;
    display: none;
}

.video-box-right #mc_embed_signup form {
    padding: 0;
    }


.video-box-right #mc_embed_signup .button {
	background: #f47820;
	background-image: -webkit-gradient(top, #fa8735, #f47820);
	background-image: -webkit-linear-gradient(top, #fa8735, #f47820);
	background-image: -moz-linear-gradient(top, #fa8735, #f47820);
	background-image: -ms-linear-gradient(top, #fa8735, #f47820);
	background-image: -o-linear-gradient(top, #fa8735, #f47820);
	background-image: linear-gradient(to bottom, #fa8735, #f47820);
	-webkit-border-radius: 7;
	-moz-border-radius: 7;
	border-radius: 7px;
    color: #ffffff;
    font-size: 15px;
    margin-top: -10px;
    padding: 0 20px 10px;
    text-decoration: none;
}

.video-box-right #mc_embed_signup .button:hover {
	background: #db6511;
	text-decoration: none;
	color: #444444;
}

.video-box-right #mc_embed_signup .button:active {
	background: #db6511;
	color: #444444;
}

.video-box-right #mc_embed_signup .indicates-required {
    font-size: 11px;
    margin-bottom: -30px;
    margin-right: 4%;
    text-align: right;
}

.custom-video-box {
	background-color: #e1e1e1;
	padding: 0.05px 10px 10px;
    -webkit-border-radius: 7;
    -moz-border-radius: 7;
    border-radius: 7px;
    height: 520px;
}

.custom-video-box hr {
    border-top: 3px dotted #b4b4b4 !important;
    margin: 10px 0 !important;
}

/* THUMBS*/
.custom-video-box h5 {
	margin-bottom: 0px;
}

.custom-video-thumbnails .wb_horizontal_container {
    clear: none;
}

.video-thumb-label {
	width: 120px;
	margin-top: -10px;
	display: block;
	position: relative;
}

.custom-video-thumbnails {
    height: 110px;
    float: left;
}

.custom-video-box .wb_video_item a {
    float: left;
    padding: 0 13px 5px 0 !important;
}

.custom-video-box:nth-child(7) wb_video_item a {
    padding: 0 0 5px 0 !important;
}

.custom-video-thumbnails .wb_video_title {
    font-size: 11px;
    font-weight: 600;
    line-height: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 120px;
    letter-spacing: .5px;
}

.custom-video-thumbnails .wb_video_image_img {
	margin-bottom: 0px;
}
eyedia is offline   Reply With Quote
Old 13th August 14, 02:30 PM   #6
eyedia
WLC Member
 
Join Date: Aug 2014
Posts: 4
Default Re: IE Item not floating where it should and other issues..

Okay so I think I fixed the image issue after some paying around. I set a width for div.wb_video_container:
Code:
div.wb_video_container {
	width: 920px;
}
And then set .video-thumb-label (the image container that wasn't floating) to in-line block:
Code:
.video-thumb-label {
	width: 120px;
	margin-top: -10px;
	display: inline-block;
	position: relative;
}
If anyone sees anything else strange can you let me know? Thanks so much everyone!

One last question:
What tools do you use for browser testing? Most sources I find use screenshots which makes it really hard to be-bug anything. I'm on a mac as well.
eyedia is offline   Reply With Quote
Old 14th August 14, 12:31 AM   #7
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default Re: IE Item not floating where it should and other issues..

http://www.browserstack.com/
__________________
Sometimes, I'm astounded by my own eloquence.
ronaldroe is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:24 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.