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.
Related
All the pages on my responsive site look fine on my Galaxy S7 except my homepage and I can't figure out why.
Here's an example of a page that looks fine:
http://edge-trainer.com/kick-in-the-butt-jumpstart.php
Here's my homepage:
http://edge-trainer.com/
I'm using the same CSS. Looking at my source code, can anyone see what the problem might be?
Thank you in advance.
Tim
The problem in your homepage is that the content-wrappers are not inside the content container.
Within your normal page you linked the dom structure is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
whereas in your home page it is
<div id="content-container">
<div class="content-wrapper>yourcontent</div>
</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
<div class="content-wrapper>yourcontent</div>
Judging by your CSS, all of the .content-wrappers should be inside #content-container
As a sidenote, it might be worth looking into flexbox and relative sizing for the layout you're trying out, it might make your life a bit easier, just a suggestion ;)
one issue I don't quite understand.
I made an online sample, when I'm resizing the window, the SPANs response one by one.
Online sample http://jsfiddle.net/Pva7y/1/
Online Images
However, I copied the same code to my local html, the SPANs response just together.
Local Image.
why different? Thanks
HTML:
<div class="row ">
<div class="span7 blue">
1
</div>
<div class="span2 red">
2
</div>
<div class="span3 green">
3
</div>
</div>
CSS:
.blue{background-color:blue;}
.red{background-color:red;}
.green{background-color:green;}
First thing is that you forgot to use container div. Correct pattern is
<div class="container">
<div class="row">
<div class="span12">
1 2 3
</div>
</div>
</div>
See corrected jsfiddle (1).
Next, if you want your page to be responsive and fit the layout to the size of the viewport you have to also include bootstrap-responsive.css. See jsfiddle (2). In your local HTML you used either both bootstrap.css and bootstrap-responsive.css or prior files merged to one CSS for reducing client-server requests number.
Your <div>s are floated in your Fiddle, but they are not floated in your local html judging from your screenshot. And since bootstrap.css floats the <div> element with a class of span, I am guessing that bootstrap.css is not loaded properly in your local html file.
A way to troubleshoot your issue is to check the Inspector (if you're using Chrome), or Firebug (if you're using Firefox). Look at the computer style of the three <div>s in your fiddle AND your local html, and compare them. They must have been styled differently because they look different on the same browser, so that's the way to start troubleshooting.
I am writing code in ASP.NET.
I have a button that is clickable on IE but not on FF nor Google Chrome.
I've discovered that the reason lays on the fact that its position: absoulute OR position:fixed
Here's the code:
<div style="padding-top:50px";>
<div id="divInfoBox" runat="server" style="padding-top:5px; height:250px;">
<div style="position:fixed; padding-left:-5px; ">
<asp:ImageButton CssClass="attachmentImageButton" ID="btnAttachment" runat="server" Visible="false"
ImageUrl="~/Style/images/attachment.png" onclick="btnAttachment_Click" />
</div>
</div>
</div>
How to make it be clickable on all browsers?
My guess is that the first two div elements are on top of the ImageButton and therefore it is not clickable.
I have no clue why is that (be glad to find out the exact reason). All I know is that the solution is adding the following:
z-index:5
And that should do the trick.
Good luck
p.s.: if 5 isn't enough, try adding higher value.
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'm using the Blueprint CSS framework to develop my website to ensure cross-browser compatability...except, it looks completely different in IE.
The site is http://rtwilson.com/academic-new/ and looks fine in Firefox and Chrome, but completely messed up in IE. The main body is not centred, the image is in the wrong place and the text is rather weird.
Does anyone have any idea how I can sort this? I thought the whole point of Blueprint et al. was that it sorted the problems with cross-browser (particularly IE) compatibility. I have included the correct IE style file - so any other ideas?
Blueprint is fine (although I have recently switched to Twitter Bootstrap)- regardless of the complexity of the site, and it does do all of the things for you, as long as your markup is correct and the classes are used correctly.
One place to start, other than the doctype (which should be added, as well - as mentioned by Michas), would be to add a "last" class to the div that contains your navbar div. The way you have it written right now is that you have a span-24, containing another span-24 immediately followed by a span-15 and a span-9.
You have:
<div class="span-24 last">
<div class="span-24">
...
</div>
<div class="span-15">
...
</div>
<div class="span-9 last">
...
</div>
</div>
You should have:
<div class="span-24 last">
<div class="span-24 last">
...
</div>
<div class="span-15">
...
</div>
<div class="span-9 last">
...
</div>
</div>
As it is written now, I would not be in the least bit surprised that IE can't figure out that there shouldn't be 48 spans in a single row.
If I am being honest, I wouldn't use blueprint css - a site simple as yours I would simply just create a seperate stylesheet for IE, and link it like this
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->