Jump to content

cuysan

Members
  • Posts

    8
  • Joined

  • Last visited

cuysan's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Thanks so much. That shiv I have in place and will help with some browsers. There are also some conditional "if" statements that help some (if my terminology is correct). I now understand the lack of answers on here so far. I spent some time away from coding and looked into display issues in general. I was struggling trying to get ie8 to display responsive. For anyone looking for that answer, the answer I see is add this script to your code. Force the hold-outs to use an up-to-date browser, don't waste your time trying to cater to ie8 and below, or the hold-outs. This forum is full of great advice. If someone isn't answering, either the question is posted wrong or there just isn't anything to add. The pro's that did not answer get my respect also. Sometimes the true answer isn't what the person is looking for. In this case, I would say the answer is don't waste your time with ie8 display. Or use old fixed-width code. Of course simple responsive pages render fine in ie8. Complex code is too much for the out dated browser. No wonder I have Linux on a few systems so far.........
  2. A few more details. Two sections that are creating problems. In the below header section the item in "banner area wrapper" is pushed down below the logo. This image is to the right of the logo on html5 compliant browsers. <div class="container"> <nav class="navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <div class="logo"> <a class="navbar-brand" href="index.html"><img src="images/logo3.png" alt=" " /></a> </div> </div> <div class="banner-area-wrapper"> <a class="navbar-brand hidden-sm hidden-xs"" target="blank"><img src="images/sample.png" alt="" /></a> /></a> </div> </nav> </div> </div> <!-- header --> Second section is three boxes side-by-side but on older browsers it shows full size images, not the three boxes. Below is a the code from one of the boxes. <div class="about-grids"> <div class="col-md-4 about-grid"> <img src="images/consulting.jpg" alt=" " class="img-responsive" /> <div class="about-grid-john"> <div class="clearfix"> </div> <h5><strong>Consulting Services</strong></h5> <p class="para"><strong></strong> Move beyond digital to make more informed decisions and draw customers closer..</p> <div class="hello"> <a href="consulting.html">Read More..</a> </div> </div> </div>
  3. I have an html5 temp site I'm creating and hoping I can get some of the older browsers to load it. I've read many pages suggesting a shiv as below: <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> or <!--[if lte IE 8]> <script src="dist/html5shiv.js"></script> <script src="dist/html5shiv-printshiv.js"></script> <![endif]--> I tried both methods but no results. I have an old IE8 version open and that's what I am using to confirm when the changes work. It currently doesn't display right in IE8. My code is valid, with the exception of one music file name ( I can fix this by creating a new mp3 with proper naming). That's all fine and dandy but is it even possible for me to get this displaying correctly in ie8< and the other outdated browsers? Any help from the pro's would be appreciated. Head section is as follows: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="Copyright" content="" /> <meta name="rating" content="GENERAL" /> <meta name="format-detection" content="telephone=no"> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/flexstyle.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> <script src="js/jquery-1.11.1.min.js"></script>
  4. Nice! Thank you so much! It works when I minimize the browser window down to mobile size. The emulator at mobiletest.me, not so much. But I do believe this nailed it. Can't begin to thank you enough. By the way, this is a W3 template. I will be donating before I take the site live........ Love W3, has taught me so much.
  5. Bootstrap v3.3.5 (http://getbootstrap.com) OK, tried it on the navbar-brand within the bootstrap, no luck. I tried it as: .navbar-brand > img { .visible-md-block; } and with the asterisk: .navbar-brand > img { .visible-md-*; } Didn't do it so removed those rules and tried the below on the style.css @media only screen and (max-width: 640px) { #banner-area-wrapper { .visible-md-*; } } & @media only screen and (max-width: 640px) { #banner-area-wrapper { .visible-md-block; } }
  6. Wait, that looks like a css command. So I'm doing something wrong. Need the pro's....... I'll try that rule on the navbar-brand css. Will post update
  7. Appears to be the correct answer. Now if I can only find the right syntax? Not the strongest coder but can work with it. <a class="navbar-brand" href="http://www.ibm.com/us-en/" target="blank" .visible-md-block> .visible-md should block Small and Extra Small devices. By the way, no access to a mobile device (or service) so I'm using this to check / verify: http://mobiletest.me/
  8. I have an odd one I need help with. I have a number of images in the header area and have been unable to remove them from mobile or small screen display. I just want them to show on desktops but not on mobile view. Here’s the images in question: <div class="banner-area-wrapper"> <a class="navbar-brand" href="http://www.ibm.com/us-en/" target="blank"><img src="images/ibm-partner.png" alt=" " /></a><a class="navbar-brand" href="http://www.raps.org/" target="blank"><img src="images/RAPS.png" alt=" " /></a><a class="navbar-brand" href="http://www.medicaldevices.org/" target="blank"><img src="images/mdma.png" alt=" " /></a><a class="navbar-brand" href="http://advamed.org/" target="blank"><img src="images/AdvaMed.png" alt=" " /></a> </div> The logo I do want to keep in mobile view is: <a class="navbar-brand" href="index.html"><img src="images/logo3.png" alt=" " /></a> I’ve tried adding display:none rules to style as well as bootstrap.css. Can’t seem to find the right fix. Any help would be greatly appreciated. Don’t think I can add a display:none rule to img tag. Tried adding one to banner-area-wrapper with no luck. The bootstrap.css has over 6000 lines. Maybe I’m just not getting the right place? Really need some help.
×
×
  • Create New...