I've been using conditional comments as a way to ensure a background image displays correctly in Internet Explorer 8. However, when I do, some of the content (some text and an image) disappears. Furthermore, an image I wanted removed in IE8 still shows up.
EDIT: Here's the URL: http://rbk.tushausweb.com/claria/development (My issue is on the second page, so just click the navigation button on the right.)
Here's a link to what I have so far: http://pastebin.com/agHxJxb0
<div id="introduction2" class="contentContainer" data-role="page" data-prev="index" data-next="introduction3" data-title="Introduction" data-url="introduction2">
<div role="main" class="ui-content">
<!--[if IE 8]>
<link href="css/clariaIE8.css" rel="stylesheet">
<div id="bg">
<img alt="" src="image/bubble.png" />
</div>
<![endif]-->
<div class="background">
<div class="container banner">
<div class="widthContainer">
<div id="banner" class="info-banner">
<p id="smBannerTitle" class="info"></p>
<h1 id="lgBannerTitle"></h1>
</div>
</div>
</div><!-- /.container -->
</div>
<div class="widthContainer">
<div class="contentBody contentBodyWithBanner">
<div class="container media">
<div id="imgIntro2">
<img src="image/Homechoice-Claria-Unit-250-million-exchanges-and-counting-427x188.png" class="img-responsive"/>
</div>
</div>
<div id="pageContent1" class="container"></div>
</div>
</div>
</div>
</div>
A screenshot:
What it should look like:
Is there a way to ensure that using conditional comments doesn't remove content?
It's hard to tell without a demo, but it looks like your IE workaround is using an <img> tag to display the background. If that's the case, you may have a conflict in the z-indices and the content may be on the page but behind the background. Try setting z-index: -1 to the false background image as a first step in debugging.
Related
Currently, I have a box which has some text inside it. Currently, the link is only applied to some text as below:
<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<div class="box">
<h3>Free delivery worldwide*</h3>
<a href="#">
*More info here
</a>
</div>
</div>
This is how it appears on the site:
https://snag.gy/sbC421.jpg
However, I want the whole link placed in the whole box and as with HTML I just place the tag inside the tag but I seem to lose all the styling and the padding goes I think? Code:
<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<a href="#">
<div class="box">
<h3>Free delivery worldwide*</h3>
<br/>
*More info here
</div>
</a>
</div>
This is how it looks after:
https://snag.gy/KZzSUv.jpg
Any help is greatly appreciated!
I think you are referencing the .box div using a css selector that requires the parent element to be a div
so you might have to change the css for the box element to something like
a > .box {
/* styles */
}
check this image for more info
Decided to do it with JavaScript inside using the below for the parameters of the div tag:
onclick="document.location='#'"
This solution is neater for what I am after and as I am using several style sheets it was difficult to spot the culprit.
Please check this HTML template first Clippinghand
My problem is on what we provide's content below. There is first image then posts and next is first post then image like that 6 Element i took. On Computer type devices things are okay but when I'm going to make it responsive for mobile or tab devices it's making problem and the problem is images and content are getting closer i just always want to make them top of the posts I mean i want my images top of the post all of, How could i do that? Is there any trick ? Also How i can Do complete this section with only one custom post ?
Here is an example on image
You can use Column Ordering via Push + Pull which is built into Bootstrap. You'll have to reorder your content to achieve this. Here a good article also.
Basically stack the column content in the opposite order and apply push and pull classes. (*instead of content 1 then content 2, stack content 2, then content 1 inside your col-md-6). See working example and it will be illustrated.
.red {
background: red;
}
.blue {
background: lightblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section id="our-services">
<div class="container">
<div class="row red">
<div class="col-md-6">
<div class="img-one">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="content-one">
<h4>Background Remove</h4>
<em>Price starts from $0.49</em>
<p>This is the most demandable and most used image editing service all over the world for ecommerce product selling. Don’t worry, we make it easy to ensure all your images fit your ecommerce image editing guideline. We resize, crop, remove borders,
and remove image background turning it to pure white, transparent or color background as per your guideline.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row blue">
<div class="col-md-6 col-md-push-6">
<div class="img-two">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="content-two">
<h4>Web-ready Images</h4>
<em>Price starts from $1</em>
<p>For web-shop owners, we introduce our additional delivery of web-ready images. Add the image specifications (like crop size 800×800 px ) and we will deliver web-ready image. We can fulfill the image size requirements for any ecommerce platform
like Amazon, eBay, Shopify, bigcommerce, volusion, squarespace etc.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row red">
<div class="col-md-6">
<div class="img-three">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="content-three">
<h4>Multiple Mask</h4>
<em>Price starts from $2</em>
<p>If you want to separate and modify different parts and features of the same product including its color, shape, and size, Multipath is the service you can take from us. We can deliver images with Alpha Channel, Layer Mask or Only Path.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row blue">
<div class="col-md-6 col-md-push-6">
<div class="img-four">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="content-four">
<h4>COLOR MATCHING</h4>
<em>Price starts from $2</em>
<p>You have many different color variations of the same product but do not want to spend time taking photos of each one of them? No worries! You don’t have to. We can change the color and size of the same product as per your instruction to save
you from investing more of your time and money in taking photos.</p>
</div>
</div>
</div>
</div>
</section>
<!-- End of Our services area -->
Look here: http://jsfiddle.net/mwvfteuq/
In two words, you need to place your divs in the order you want them to appear on the smallest screen. For wider devices you can play with float set to left or right (pull-left and pull-right in bootstrap) to customize elements position in a row. Revoke those properties using media queries for the smallest screen.
For example:
HTML (using bootstrap)
<div class="row">
<div class="col-sm-6 pull-right right">img</div>
<div class="col-sm-6">some stuff</div>
</div>
<div class="row">
<div class="col-sm-6">img</div>
<div class="col-sm-6">some stuff</div>
</div>
CSS
#media (max-width: 768px) {
div.right{
float:none !important;
}
}
Do not forget to use !important to override bootstrap pull-right property
I want my site to be fluid/responsive to whatever device the user has; I reckon more often than not it will be a cell "phone," but I am developing on a laptop, so there's a mismatch between what I see at design time and what most users will see. Of course, I can run emulators/simulators, etc. But my point is that I want the site to automatically adjust to the size/aspect ratio/orientation the device at any given moment. From what I've read, the easiest way to accomplish this is to leverage Twitter Bootstraps capabilities by referencing their CSS file and adding a few class declarations to various tags in my html. I'm wondering just where I need to add these.
I've added the bootstrap css:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
My _SiteLayout.cshtml (Razor 2 webiste) file came structured this way (showing just the body, head decapitated):
<body>
<div id="fb-root"></div>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
</p>
</div>
<div class="float-right">
</div>
</div>
</header>
<div id="body" >
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>
</p>
</div>
</div>
</footer>
</body>
So it uses "content-wrapper" on the outher divs and then floats inner tags left and right. Does this obviate the need for Twitter Bootstrap? Is the same sort of responsive design baked into this Razor 2 structure already?
If not, in which tags should I put the Twitter Bootstrap class declarations?
Should I add class="row-fluid" to some of these tags and, if so, which ones?
The basic fluid grid scaffolding of Twitter Bootstrap is laid out as .container-fluid > .row-fluid > .span#. Spans within .row-fluid use percentage widths conducive of layouts consisting of elements that add up to 12: .span1, .span2, .span3 etc..
Span classes are already set to float:left which can be overridden by adding .pull-right to float:right elements.
So Bootstrap implementation with your layout could look something like:
<body>
<div id="fb-root"></div>
<header class="container-fluid">
<div class="row-fluid content-wrapper">
<div class="span6">
<p class="site-title">
</p>
</div>
<div class="span6 pull-right">
</div>
</div>
</header>
<div class="container-fluid" id="body">
#RenderSection("featured", required: false)
<section class="row-fluid content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer class="container-fluid">
<div class="row-fluid content-wrapper">
<div class="span12">
<p>
</p>
</div>
</div>
</footer>
</body>
Take a look at http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
I am working with Bootstrap and am having a strange layout issue in my fixed (not responsive) layout.
Using the BS scaffolding syntax, I have several nested divs in my grid. Usually looks/works fine; however, sometimes when I reload the page divs break throughout the page (header nav, divs in main content, etc.)
I cannot recreate this problem, it just seems to act the way it wants when it wants (again, when I refresh/reload).
Here are screenshots of what the issue looks like when it happens, and what it should always look like:
good 1
http://static.inky.ws/image/3486/ss-1-good.jpg
bad 1
http://static.inky.ws/image/3485/ss-1-bad.jpg
(I cannot add more URLS to this post; if you want to see more, the above 2 can be changed to 3487/ss-2-good.jpg & 3484/ss-2-bad.jpg)
Steps taken (to no positive effect):
-redo the grid
-go through my custom CSS line by line, seeing if removing portions solves the problem
-confirm paths, file order in webpage, etc.
-search, search and search again
Here is the basic HTML structure:
<div class="container">
<?php require ("includes/nav-top.php") ;?>
<!--page header -->
<div class="row" id="">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
<div class="row">
... content ...
</div>
<div class="row-fluid">
<div class="span8">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
<div class="row-fluid">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
<!--row-fluid-->
</div>
<!--span8-->
<div class="span4">
... content ...
</div>
<!--span4-->
</div>
<!--row-->
<div id="" class="row">
<div class="span4">
... content ...
</div>
<div class="span4">
... content ...
</div>
<div class="span4">
... content ...
</div>
</div>
<!--row-->
<footer>
... content ...
</footer>
</div>
<!--container-->
I am loading the external files like this:
HEAD:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
;
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-config.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
BEFORE the closing BODY tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<?php require('includes/i-modal.php');?>
<?php require('includes/i-googleAnalytics.php');?>
<?php require_once('includes/i-js.php'); ?>
NOTES:
-like I said, this could happen 10x in a row, then the next 5 refreshes/reloads and it looks fine
-in the above files loaded in there is an include for Fancybox (i-modal.php) as well as custom JS (i-js.php). There is no CSS or anything else in those files which seems like it might trigger this.
-currently the BS overwrites (bootstrap-config.css) is empty; seemingly, when I add anything to it the problem kicks in, whether or not what little I add has margin or padding.
-from my research it looks like my use of "row-fluid" for nested grid sections is allowable in the otherwise fixed layout
-so far, testing on Safari / OSX, have not seen the problem in other browsers, but as I said it happens when it chooses to.
SO. After all this, I guess I am wondering what these symptoms might suggest to the knowledgeable out there. Bootstrap is outstanding, in many ways the tool of my dreams - has anyone experienced anything like this?
Thanks for reading this.
First of all you have some bad structure in your layout it should look like this:
<div class="row" id="">
<div class="span6">
<div class="row">
<div class="span3">
... content ...
</div>
<div class="span3">
... content ...
</div>
</div>
</div>
<div class="span6">
... content ...
</div>
</div>
<div class="row">
<div class="span12">
... content ...
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
</div>
</div>
You have to follow this rules:
don't use row-fluid in fixed layout.
full width span is 12.
content have to be in span - ALWAYS
sub-spans have to be in rows - ALWAYS
a sum of spans in sub-row have to be equal of container span (that don't concerns row-fluid) eg. in span8 you can place a row with span6 and span2
don't mess with bootstrap CSS if you are not SURE what you're doing
check if you didn't accidentally name some custom CSS classes same way as in BS
Fix those and it should fix your display problems.
I am trying to affix a callout image to the top right of a page, but I do not want it moving once the screen is below a certain width or else it will begin to overlap other page elements. Does anyone know what the best way of going about this is? Thanks!
Standard CSS practises tell us that each element on the page should be encapsulated as a block:
<div style="float:left;">
<div style="float:left;">
<img src="picture.png" />
</div>
</div>
This kind of style allows elelments to stack on top of one another, preventing overlap.
In your case, it sounds like you have a header, and you need a picture fixed in the top right:
<div id="header" style="width:100%;float:left;">
<div style="float:right;">
<img src="picture.png" />
</div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
Hey, this stuff works!
</div>
But you also mentioned your page should have a min width, so that when a user tries to contract the width, elements do not overlap horizontally:
<body style="min-width:800px;">
<div id="header" style="width:100%;float:left;">
<div style="float:right;">
<img src="picture.png" />
</div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
Hey, this stuff works!
</div>
</body>