Here's a weird bug I've found, IE8 is duplicating my div, but only a part of it.
How it looks in IE8:
And here's how it's meant to look in FF:
And the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
\/\/\
<div id="roundbigbox">
<p id="pro">Produkter</p>
<div id="titles">
<div id="thinlinecopy"></div>
<div id="varekodetext">
<p>Varekode</p>
</div>
<div id="produkttext">
<p>Produkt</p>
</div>
<div id="pristext">
<p>Pris</p>
</div>
<div id="antalltext">
<p>Antall</p>
</div>
<div id="pristotaltext">
<p>Pris total</p>
</div>
<div id="sletttext">
<p>Slett</p></div>
<div id="thinline"></div>
</div>
...content...
<div class="delete">
<a id="slett" href="/order/delete/1329?return=" title="Slett"><!--Slett--></a>
</div>
</div>
CSS for FF:
div #roundbigbox {
background-image:url(../../upload/EW_p_og_L.png);
background-position:top center;
background-repeat:no-repeat;
padding:5px;
padding-top:10px;
padding-bottom:0px;
width:760px;
height:1%;
border-width:1px;
border-color:#dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:1;
position:relative;
overflow:hidden;
margin:0;
margin-bottom:10px;
}
CSS for IE:
div #roundbigbox {
background-image:url(../../upload/EW_p_og_L.png);
background-position:top center;
background-repeat:no-repeat;
padding:5px;
padding-right:50px;
padding-top:10px;
width:760px;
height:1%;
border-width:1px;
border-color:#dddddd;
z-index:1;
position:relative;
overflow:hidden;
margin:0;
margin-bottom:10px;
}
What could cause such a weird bug? It's not duplicated in the HTML. I am stumped!
Note: There a lot of other divs inside, one after the other.
Thanks for any responses.
i would say the same as: graphicdivine. (remove the extra </div> at the end) plus you shoud review your CSS:
negative paddings do not exist :P (even in IE)
you can set your paddings with only one declaration: padding: top right bottom left
same thing for border and background:
background:url(../../upload/EW_p_og_L.png) top center no-repeat;
border: 1px solid #ddd; /* when you have e hex color with 6 same characters just write 3 of them */
You have an extra </div> at the end.
It looks like your stylesheet may have a mistake in it:
CSS for IE:
div #roundbigbox {
...
padding-bottom:-20px;
....
}
That may be what's causing the bottom portion to be coming up like that.
try to take the comment out of the <a>
tag
Sound sounds weird, but I have seen issues with this... <!--Slett-->
Added this right after my div markup, it fixed it.
<div style="display:none; width:100%; margin-bottom:10px;"> </div>
Strange problem. Thanks for all your help!
Related
I want to insert a little green square between words on my WordPress homepage. I wrote the html:
<div class="x"><center><p
style="border:10px; border.
style:solid;
border-color:#00ff00; padding:
0.0em; width: 2px; height:
2px;">
</p></center></div>
Pen: https://codepen.io/adsler/pen/KOXzPw
Site: http://4309.co.uk
Every other page I can access and edit but not the same for homepage.
Here you go.
go to your appearance, customise, add'text widget' then add the html code. If you were to add the css, you would need to go to --> appearance --> additional css
Have a great day!
Austin
It will be work
<div class="x"><center><p >Write Something<span style="border:10px; border-style:solid; border-color:#00ff00; padding: 0.0em; width: 2px; height: 2px;"></span> New</p></center></div>
Pen: https://codepen.io/shakil-shaikh/pen/xvXdEX
3 divs. Div one for top, div two for the square, and div three for bottom. If you need more explanation, I can elaborate.
Check below.
Box ‘one’ would be where text one goes, ‘center’ is where you would style the geometric shape, and ‘box2’ is where the second string of text will go.
When I get to my computer I’ll see if I can write out the full code for you to use.
<div id=box1></>
<div id=center></>
<div id=box2></>
Is this what you want to accomplish?
<!doctype html>
<head>
<meta char="utf-8">
<title>box test</title>
<style>
#content {
margin:25px auto;
}
#text-1 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-bottom:10px;
}
#shape {
border:#000000 2px solid;
width:20%;
height:20%;
}
#text-3 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-top:10px;
}
</style>
</head>
<body>
<div id=content>
<div id=text-1>text one</div>
<div id=shape>shape</div>
<div id=text-3>text two</div>
</div>
</body>
<html>
Does this work? the position property allows you to put your div's anywhere on the website. Just remember that the attribute allows for stacking. Just use the left/right/top/bottom attribute.
#container {
width:1000px;
}
#x {
position:absolute;
top:0px;
left:0px;
background-color:blue;
}
#center {
position:absolute;
top:0px;
left:150px;
}
#y {
position:absolute;
top:0px;
left:300px;
background-color:#ffff00;
}
<div id="container">
<div id="x">Write something</div>
<div id="center">middle</div>
<div id="y">New</div>
</div>
I have two divs at the moment that I'm wanting to float on left and right sides however they are both kinda sticking to each other and can't seperate them..
html:
<nav>
<div id="nav_content">
<div id="home_icon" />
<div id="search_icon" />
</div>
</nav>
So I'm trying to float the home_icon to left and search_icon to right:
CSS
nav
{
background:white no-repeat;
width:75%;
height:5em;
margin-left:8em;
}
#nav_content
{
width:100%;
height:100%;
clear:both;
position:relative;
display:inline-block;
float:left;
}
#home_icon
{
background:url(../images/home.png) no-repeat;
width:50px;
height:50px;
top:50%;
position:relative;
transform: translateY(-50%);
transition:ease-in-out 0.5s;
margin-left:1em;
float:left;
display:inline-block;
}
#search_icon
{
background:url(../images/searchicon.png) no-repeat;
width:40px;
height:40px;
top:50%;
transform:translateY(-50%);
transition:ease-in-out 0.5s;
float:right;
display:inline-block;
position:relative;
}
You can't do
<div id="home_icon" />
<div id="search_icon" />
in HTML 5. Because it means the same as
<div id="home_icon">
<div id="search_icon">
which makes the browser think that #search_icon is inside #home_icon.
So, either set the DocType to XHTML or close the divs properly.
Related Question - Are (non-void) self-closing tags valid in HTML5?
jsFiddle - http://jsfiddle.net/9vd01zx5/
You are using wrong HTML closing tags
use:
<div id="home_icon">Left</div>
<div id="search_icon">Right</div>
Remove the text left and right later..
I cannot seem to get my float to behave as I expect them to. I am attempting to create a four panel setup, like the windows logo. The problem is, the fourth panel keeps staying flush with the last block of the top row. I am running this in IIS6 in IE7. It runs fine in the fiddle below as well as on IIS7, but I cannot get the same behavior in IIS6.
http://jsfiddle.net/9GCrm/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#replist
{
background-color:blue;
float:left;
height:250px;
width:300px;
margin-right:10px;
margin-bottom:10px;
padding:3px;
}
#repedits
{
background-color:blue;
float:left;
height:250px;
width:300px;
margin-bottom:10px;
padding:3px;
}
#mgrslist
{
background-color:blue;
height:250px;
width:300px;
clear:both;
float:left;
margin-right:10px;
padding:3px;
}
#importdiv
{
background-color:blue;
float:left;
height:250px;
width:300px;
padding:3px;
}
</style>
</head>
<body>
<div id="admindiv">
<div id="replist">
</div>
<div id="repedits">
</div>
<div id="mgrslist">
</div>
<div id="importdiv">
</div>
</div>
</body>
</html>
just remove clear:both; from #mgrslist and instead add it as a separate class, like :
<div id="admindiv">
<div id="replist"></div>
<div id="repedits"></div>
<div class="clr"></div>
<div id="mgrslist"></div>
<div id="importdiv"></div>
</div>
demo here
Why it works?? because <div class="clr"></div> will clear the float for all the divs before it but adding it to the class will only clear:float for that particular class and not the pre-divs before that class!!
Also, now that pseudo classes like :before and :after exist, its better practice to use them for clearing a float.
Read this thread to understand it better : replace the clear:both with pseudo class
In IE7, my order sample button "#itmSampl" isn't vertically aligned with the ".add-to-cart" button to the left of it, although in FF3.6 and Chrome 5 it is. I need it to be aligned correctly in IE6-8. Does anyone see what I'm missing?
<style type="text/css">
#buttonbox { position:relative; width:326px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#accounting #box-accounting .image-item .content-account
#ordrWizrd { float:left; height:24px; width:111px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style>
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><%=getCurrentAttribute('item','addtocarthtml')%></table>
</div>
<div id="ordrWizrd" class="add-to-cart"><img src="/images/img/add-to-cart.gif" alt="configure item"></div>
<div id="itmSampl"></div>
</div> <div class="clearfix"></div> </div>
Also, here's the test page if a visual helps (you have to login to see the buttons instead of the bulleted list): http://www.avaline.com/85W_test_2
Login:test2#gmail.com
Pass:test03
Solution 1: Since you are already using a lot of tables in your page, another one won't hurt - just change your HTML from what you have above to something like this (may require a few tweaks):
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><tr>
<td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td>
<td valign="bottom"><div id="itmSampl"></div></td>
</tr></table>
</div>
<div class="clearfix"></div>
</div>
<!-- And also put #ordrWizrd in there somewhere -->
Solution 2: Take away all the "position: absolute" stuff with #itmSampl (remove the CSS bottom, position, right, and maybe margin and height/width properties). Then, add CSS float: right; margin-top: -36px; to #itmSampl to make it float on the right and move upward 36 pixels.
Well hi, guess what, I have an IE positioning issue! This is in 8, so god know what's going on in the other versions (checking later)
Both the boxes call the same class, why is IE being so difficult?
Here's how it's meant to look:
And here's how it does look:
CSS: (removed comments for ease of reading)
div .roundbigboxkunde {
background-image:url(../../upload/EW_kunde_info.png);
background-position:top center;
padding:10px;
padding-top:10px;
padding-bottom:20px;
width:560px;
height:1%;
border-width:1px;
border-color:#dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:1;
position:relative;
overflow:hidden;
}
div .roundbigboxkundei {
margin-top:10px;
padding:10px;
padding-top:10px;
padding-bottom:10px;
width:760px;
height:1%;
position:relative;
overflow:hidden;
And HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div class="roundbigboxkunde">
<div class="roundbigboxkundei">
<p id="nyk"> </p>
<div id="bg_box2"></div>
<p class="required">
<label for="billing_firstName"><span class="label">Fornavn:</span></label>
<fieldset class="error"><input name="billing_firstName" class="text" type="text" value="Kyle"/>
<div class="errorText hidden"></div>
</fieldset>
</p>
CONTENT CONTINUES
</fieldset>
Here is the page
Given that you have some content which looks like it's appearing inside other content, if I were you I'd start by double checking that all your tags are closed (i.e., that you don't have a <div> that's missing its </div>).
But it's hard to tell from what you've posted . . . If the page is hosted somewhere and you can link to it, that would make it easier to debug.
I added:
<div class="clear"></div>
with the css:
.clear
{
clear: both;
width: 100%;
height: 0;
overflow: hidden;
float: none !important;
}
Between the two boxes. Fixed it right up :)