I hesitate to say that there’s a bug in wordpress but this has gotten me stumped. When I view the following in chrome as a html file it works perfectly. When I try to do this in wordpress I have all sorts of issues on different mobile devices. Essentially, the left and right id’s are not taking up the width that’s being assigned. I deactivated all plugins except add css code and I did a healthcheck, neither yield any insight to the problem. Here’s the code:
<!DOCTYPE html>
<html>
<head>
<style>
#container{
display:flex;
justify-content:start;
width:100vw;
font-size:3vw;
}
#left{
width:35vw;
border:solid black 1px;
border-shadow:border-box;
}
#right{
width:65vw;
border:solid black 1px;
border-shadow:border-box;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="left">mobile</div>
<div id="right"> different devices have problems</div>
</div>
</body>
</html>
The page I need help with: https://www.sustainablewestonma.org/test-2/
On your website, there's a CSS rule for html, body which contains min-width: 490px
This causes your body to be wider than the screen on small devices (i.e. more or less any smartphone in portrait orientation). The right/left rules apply, but their percentages are calculated from body width 490px.
Related
A website that I'm currently working on works completely fine in regards to the footer, however when viewing the website on the iPad's Safari, the footer is misplaced quite a bit above the bottom of the page and after an hour of trial and error I'm not getting anywhere fast. I was hoping someone had this very issue and can perhaps aid me by explain what you did to resolve the issue.
This is the basic markup of my HTML.
<html>
<body>
<form>
<iframe></iframe> <!-- This is where the different pages are set -->
</form>
<footer>
</footer>
</body>
</html>
Here's the CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
height:40px; /* Height of the footer */
background:#6d8085;
}
Chrome
iPad
Thanks a lot for the help!
Try position:fixed;
or changing height to min-height on your css declaration
Basically your content is peeking out of your page. To see this add body{background-color:red;}
Help! This box is exactly the same size as the length of the text at 100% zoom on IE and Chrome. But, when viewed on my mobile phone, the box overhangs the length of the text. Is it possible to fix this?
<style type="text/css">
#box{
width:375px;
background:blue;
font-size:16px;
font-family:Courier New, Courier, monospace;
}
#textbox{
background:pink;
font-size:16px;
font-family:Courier New, Courier, monospace;
}
</style>
<html>
<head>
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</head>
</html>
Firstly, browsers will interpret font widths differently. Relying on the width of fonts is not ideal.
Instead, if you want the boxes to match the same width, wrap a <div> around them and set it.
<div class="wrapper">
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</div>
A couple other problems with the code you posted.
You must put your embedded styles inside of the head tags.
You must never put anything before the <html> tag except <!doctype>
Never put <div>'s inside of a head. They only belong in the <body>
The <head> is used to initialize data. The <body> is used to display data.
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
The web page that I am designing is squished down in IE9 compared to Chrome. It's not just the font, it's the width of the page and everything. The layouts are the same. I looked at several other sites and they look the same in both browsers. I therefore don't think it's a browser setting issue. Both browsers are set to 100% zoom. I specify the width and font-size in the CSS of the page. And, when I check the Inspect element in the browsers they do, in fact, both tell me that it's Times New Roman 15px and that the width is 900px. But no way is this true for both. I am running on localhost.
How do I fix this so I know what I'm designing for?
EDIT:
In header (now):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
CSS:
body{font-family:"Times New Roman";font-size:15px}
.container{width: 900px; height:100%; margin-left:auto; margin-right:auto; overflow: hidden; min-height: 700px;}
.header{padding:30px;}
.naviagte{}
.left_column{float:left; width:100px; padding-bottom: 100000px; margin-bottom: -100000px; }
.main_body{float:left; width:700px; min-height: 700px; padding-bottom: 100000px; margin-bottom: -100000px;}
.right_column{float:left; background:green;width:100px; padding-bottom: 100000px; margin-bottom: -100000px;}
.footer{}
.clear{clear:both}
HTML:
<div class = "container">
<div class = "header">My website and stuff</div>
<div class = "navigate">
stuff here
</div>
<div class = "left_column"> </div>
<div class = "main_body">
stuff here
</div>
<div class = "right_column"> </div>
<div class = "clear"></div>
<div class = "footer"> </div>
</div>
This is usually due to a bad header. Try with this :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Note the two settings : the second one isn't always needed but for some edge cases (float behavior for example) it will make IE work like the other browsers.
EDIT :
Don't use values like 100000px for padding or margin ! This might provoke integer overflow errors. Your problem is likely here.
I'm developing on a Mac, so I'm relying on emulators for IE-testing. According to netrenderer (http://ipinfo.info/netrenderer/), my layout (which naturally works beautifully on my installed versions of Safari & Firefox) works in IE6 and below, but not at all in IE7 and above.
Note that I haven't tested this with an actual IE install- only with netrenderer.
It is showing that on IE6 and below, despite there being some minor font-sizing issues, it mostly works: the "menu" sits on the left and the "content" sits on the right, and a background image shows up for "menu". In IE 8&9 the divs sit on top of each other, and in IE7 the "menu" div is shoved over to the far right. In 7, 8 and 9 no background image shows up for "menu".
I've created a test page with simplified content and the relevant styles built into the header here: http://www.steph-morris.com/test.html
I've run it through the W3C validator and it validated fine. I've tried dicking around with position: variations on the various containers, as suggested by many a StackOverflow IE positioning solution, to no avail. I am hoping that some battle-hardened veteran of the browser compatibility wars will be able to take one look at it and let me know why the layout concept I've chosen won't work with IE, and point me in the direction of an acceptable hack or substitute.
This was a while ago now, but i noticed your link was still active (and still showing the broken layout)...
I had a quick look at this and I think the problem lies within your css. I didnt have time to have a thorough look but i did manage to quickly draw up a basic version of your site by changing some lines which worked in IE9/8/7 and FF.
Hope this helps :)
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Steph Morris | TEST</title>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Puritan">
<style>
body {background:#ffcc33 url('http://www.steph-morris.com/images/other_bg.jpg'); font:13px/1.5 Helvetica}
#menu {width:170px; float:left; margin-right:1em}
#logo{}
#logo h1{}
#logo h1 a{color:#000; text-decoration:none; font-family:'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif}
#middle_left ul {
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif;
font-size: 13px;
list-style:none;
padding:0;
color:#000}
#other {float:left; width:600px;}
#other h1 {
font-family: 'Gill Sans','Puritan',Verdana,Arial,'Liberation Sans',FreeSans,sans-serif;
font-size: 35px;
padding-right: 15px;
padding-top: 15px;
margin:0;
}
#other_text {padding:25px;}
#other_content {width:600px; height:600px; background: url("http://www.steph-morris.com/images/other_square.jpg") no-repeat scroll center top transparent}
</style>
</head>
<body>
<div id="container_other">
<div id="menu">
<div id="menu_left">
<div id="top_left">
<div id="logo"><h1>Steph Morris</h1></div>
</div>
<div id="middle_left">
<ul>
<li><div>The Start</div></li>
<li><div>About</div></li>
<li><div>The Novel</div></li>
<li><div>Translation / Übersetzung</div></li>
<li class="current"><div>Around</div></li>
</ul>
</div>
<div id="bottom_left">
<p class="contact">Contact:<br>steph#<br>stephmorris.com</p>
</div>
</div>
</div>
<div id="other" class="">
<h1 class="veolay">Other Works</h1>
<div id="other_content">
<div id="other_text" class="veolay"><p>Due to absolute positioning, we need to define the height of the slideshow DIV. Also, notice that we defined three different z-indexes—we will manipulate these soon using jQuery.</p>
<p>For the slideshow animation we are going to switch between each photo at a set rate. So let’s start by writing a function that brings in a new photo on top of the last active image:</p>
</div>
</div>
</div>
</div>
</body>
</html>
Can anyone explain why I get a vertical overflow with this code please?
<html>
<body style="width:120px; height:120px; background-color:white;">
<div style="padding:20px; background-color:blue;">
<div style="width:100%; height:100%; background-color:white">
<div style="padding:20px; background-color:green;">
<div style="width:100%; height:100%; background-color:white">
</div>
</div>
</div>
</div>
</body>
</html>
In Chrome 8 it renders like this:
I'm assuming you want it to look as it does, but with the green border not protruding outside the blue one, and the whole thing fitting inside 120px * 120px.
You aren't specifying a doctype in that code, so it becomes difficult to make things work between different browsers - some browsers will fall into "quirks mode".
With the code you gave, IE8 for instance stretches the layout to the width of the window.
The first step to make it look consistent is to add a doctype, such as the HTML5 doctype:
<!DOCTYPE html>
Adding that makes it look consistent between Chrome, IE8, Firefox, Opera:
..but it also makes it look wrong, and there's no simple way to fix it because you're trying to mix % and px based measurements (a simple fix would be to use just % or just px). Using height: 100% and padding: 20px will make the element too tall because it's total height will be the padding plus the height of the parent element (this is the reason for your "overflow").
So here's some new code which gives the visual effect you're looking for using a different method:
Live Demo
<!DOCTYPE html>
<html>
<body style="width:120px; height:120px">
<div style="background:blue; width:100%; height:100%; position:relative">
<div style="background:green; position:absolute; top:20px; right:20px; bottom:20px; left:20px">
<div style="background:white; position:absolute; top:20px; right:20px; bottom:20px; left:20px"></div>
</div>
</div>
</body>
</html>