After inserting an image into my template, a set of boxes further down the page seem to have drifted out of sync with the rest of the template and I'm baffled as to why. I have tried messing with certain padding and margins and can't seem to keep the image along with the correct alignment.
The Code
<div id="SuperContentsWrapper">
<div id="SuperContents">
<div id="SuperContentsSub">
<h1>
<div align="center">
<font color="#A35E41"><em><font color="#000000">Batman Vs Superman Boys' T-Shirt</font></em></strong></font>
</div>
</h1>
<p>
<div align="center"> <img src="http://nutty-squirrel.co.uk/Kieran%20Completed%20SKU%20/Batman%20Test.png?" height="100%" width="100%">
<p>
<div align="center">
<font size="3">Great for all occasions, this Batman Boys T-Shirt will receive a great reception anywhere. This T-Shirt looks and feels great and is made with 100% innovative SofSpun Cotton and has a longer-line for a more fashionable looking T-Shirt.</font>
</div>
<p> </p>
<div align="center">Brand: Fruit Of The Loom </div>
The image causing the issue is: <div align="center"> <img src="http://nutty-squirrel.co.uk/Kieran%20Completed%20SKU%20/Batman%20Test.png?" height="100%" width="100%">
Please let me know if there is anymore code needed to understand why this is happening!
To expand my answer in the comments, the lack of a closing </div> tag after the image meant that the browser engine would render everything following that unclosed <div> as being inside that <div> until a matching closing tag was found, which will cause damage to the entire visual layout thereon downwards.
Related
I've got a 3x3 grid built with Zurb's Foundations framework and on load sometimes these boxes overlap each other. The number of image that load normally and the number that does not is completely random. Sometimes it's just one image, sometimes all of them, etc. It also happens more often when you view the website from http:// instead of locally. Just take a look at the image below.
The boxes are responsive, in such way they decrease in size when the browser gets smaller dan 1200px in width. Therefor a static height of each box isn't an option. They do remain the same ratio (4:3).
How do I make them not overlap each other?
I think the issue is the browser renders the boxes quicker than it can render each image- and therefor doesn't take the height into account.
My code for this part looks like this
<div class="row">
<div class="large-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-6 medium-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
</div>
I think this is a classic case for a Foundation block-grid. Just change the class from large-3 to large-block-grid-3.
So your code will look like this:
<div class="row">
<div class="large-block-grid-12 large-centered columns">
<div id="grid" class="row">
<figure class="small-block-grid-6 medium-block-grid-4 columns item" data-groups='["all", "app"]'>
<img src="images/portfolio/nos/sp-item.jpg" alt="img01"/>
<figcaption>
<h2><span>NOS</span></h2>
<p>5 maanden werken aan een nieuwe NOS app</p>
</figcaption>
</figure>
<!-- 8 more figures like the one above, each is one box -->
</div>
</div>
You can learn more about Foundation block grid here
I added the .imageLoaded() jQuery plugin and configured it so that only when all images are loaded in the #grid then shuffle.js could load; a plugin that I use for shuffling/filtering the items.
Now, both on reload and clear-cache-full-reload, it works- and is showing correctly.
The problem was that if the plugin is fired before all/any of the image has been loaded, it just gives it a 10px height. Now, by firing the plugin after all images have been loaded, they get shown at their full height.
Strangely though, I applied this suggestion before I changed my grid to a block-grid, as suggested by #Asaf David, it didn't work. Now it does.
++ Credits to #Asaf David, for suggesting the block-grid, although I either can't confirm nor deny this helped. But at least it improved my code, imho.
I have a basic 3 column layout (https://jsfiddle.net/mjaa64cj/) but am unable to swap the text/image placement on large screens of the elements in the last column. On mobile/tablet devices the columns stack ok.
Screenshot of the expected layout
I'm using bootstrap 3.2. Checkout the fiddle for details.
Here's the html code:
<div class="container">
<div class="row front">
<div class="col-lg-4">
<img class="img-responsive" src="holder.js/350x350" />
<h2>I, Roommate</h2>
<p>Oh sure! Blame the wizards! Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life. Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor.</p>
</div>
<div class="col-lg-4">
<h2>The Farnsworth Parabox</h2>
<p>I just told you! You've killed me! With a warning label this big, you know they gotta be fun! When will that be? Man, I'm sore all over. I feel like I just went ten rounds with mighty Thor. Mor's good friend, Richard Nixon. Say it in Russian</p>
<img class="img-responsive" src="holder.js/350x350" />
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 col-sm-12">
<h2>A Pharaoh to Remember</h2>
<p>With a warning label this big, you know they gotta be fun! Moving along… Bender, this is Fry's decision… and he made it wrong. So it's time for us to interfere in his life. Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. Why would I want to know that.</p>
</div>
<div class="col-lg-12 col-sm-12">
<img class="img-responsive col-sm-push-4" src="holder.js/350x350" />
</div>
</div>
</div>
</div>
Have tried with push/pull the elements in the 3rd column, but the content is just overflowing beyond the edge of the screen or over the 2nd column.
Do you have any idea how to solve this?
I've put together this small little piece but I'm having problems with the renderings below IE9.
I've been going over a bunch of tutorials and have even tried a version of the "html shiv" technique, but to no avail.
I'm not sure what the problem is. I cross tested it and it works in pretty much every browser minus IE8 and below. I'm just curious if I'm going to have to rework an entire style sheet for the IE8 and less bunch or if I'm just missing something.
In IE8/IE7/IE6 the hover states for the buttons work, but it's as though all of the boundaries disappear.
http://www.brodieyazaki.com/matt_tiles
is a live working version.
Here's the HTML (I would include the CSS but it's long, but you can view it in developer tools sorry for the inconvenience).
<section id="tile">
<button id="toggle_button"></button>
<section id="tile_content">
<figure id="tile_content_figure" class="clearfix">
<img src="imgs/tile_pic.png">
<h1>
“Siri's Default Settings Leave
Your iPhone 4S Exposed”
</h1>
</figure>
<div id="tile_content_link">
<p id="from_in">
From nytimes.com in arab spring
</p>
</div>
<div id="tile_content_comment" class="clearfix">
<img src="imgs/user_img.png">
<p>
"This is the basic version of the tile"
</p>
</div>
</section>
<footer id="tile_foot">
<div id="foot_wrap" class="clearfix">
<figure class="like_view">
<img src="imgs/like.png">
<span>10</span>
</figure>
<figure class="like_view">
<img src="imgs/view.png">
<span>100</span>
</figure>
<article id="social" class="clearfix">
<button id="facebook"></button>
<button id="tumblr"></button>
<span>share</span>
</article>
</div>
</footer>
</section>
Just looking to get pointed in the right direction. I know that the CSS has features that IE8 and below won't pick up, but the head scratcher for me is that it's as though the style sheet in its entirety is broken.
please help, and thank you
< ie9 doesn't understand your html5 elements: article, footer, section, figure; offhand i'd just go ahead add html5.js and then turn them on in your css:
article,figure,section,footer{display:block}
i think that should fix what you are talking about
You have lots of duplicate id's. id's must be unique per element or a browser may ignore subsequent instances of the id. You should also declare a document encoding, among other HTML Validation errors...
http://validator.w3.org
Your site is more likely to work as expected, in all browsers, when its HTML code is fully compliant.
I am creating an aspx page which appears fine in mozilla firefox but does not look so great in Internet explorer. In Mozilla its appearing something of this format:
<form>
some stuff
<div class="left">
<div class="right">
</form>
but looking at the source code of the page loaded in IE 8, it looks sometbhing like this:
<form>
some stuff
</form>
<div class="left">
<div class="right">
What approach should I take to start fixing it? So far I've tried playing around with the css and fixing paddings and margins but nothing works :/
Thanks so much
C
I think the OP's code is just pseudocode to illustrate his point. If the left and right divs are floated, you might need to add a clearing element after them, to make the form expand around it.
<form>
<div class="left">Stuff</div>
<div class="right">Stuff</div>
<br style="clear: both;" />
</form>
There are better methods than <br style="clear:both; />, but you can try it to see if it fixes your problem.
Here's the site: www.red-tuxedo.com
I want the "Red Tuxedo" text to sit next to the logo, not below, and I want to get rid of that hard rule that runs through the logo. My CSS / HTML skills aren't up to it. I completely destroy the column layout when I change the text and I can't find the hard rule in the code. Tried adjusting the gif (cut off the bottom in Photoshop) and that didn't help.
I did write to the person who created the template; haven't heard back after several days. Would like to get this fixed before I start adding more pages.
thx
One way is to move the logo within the #logo div:
<div id="header-logo">
<div id="logo"><img height="60" width="60" alt="Red Tuxedo Logo" src="logo_red_tuxedo.gif" id="logo_red_tuxedo"/><span class="red">Red</span>Tuxedo</div>
<form action="#" class="search" method="post">
<p><input type="text" class="textbox" name="search_query"/>
<input type="submit" value="Search" class="searchbutton" name="search"/></p>
</form>
</div>
Try changing the div (id=logo) so that it includes the logo image and the text and add align='absmiddle' to the image. I'd suggest CSS but it looks like it has fixed attributes on it anyway. The "rule" looks like it is coming from the background image for the body element. You'd need to update the file bg.gif to modify it, I think.
<div id="logo">
<img id="logo_red_tuxedo" src="logo_red_tuxedo.gif"
alt="Red Tuxedo Logo" align="absmiddle" height="60" width="60">
<span class="red">Red</span>Tuxedo
</div>
To move the text, I'd put the image inside the logo div, the way dmondark suggested. As for the hard rule, it's part of the background image for the body, bg.gif. Here's an edited version I made that doesn't have it.