I have a webpage with two nested divs.
I need the inside div to show its border, however it is not. I have tryed every suggestion I have come across, but no avail.
while trying different solutions, I have noticed that the parent div does show its border without much hassle. What am I doing wrong?
css
.contentItemsWrapper
{
margin:auto;
width: 900px ;
margin-left: auto ;
margin-right: auto ;
text-align:center;
padding-top:20px;
padding-bottom:20px;
border:solid red;
border-width:5px 0;
/*this div's border is showing up fine.*/
}
.contentEventItem {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
position: relative;
border:solid red;
border-width:5px 0;
/* this last one is not working*/
}
HTLM:
<div class="contentItemsWrapper">
<div class="contentEventItem style=" border:solid="" red;="" border-width:5px="" 0;="" "="" id="evento1">
<div class="DataIncontro" id="dataIncontro1">
<span class="month">Decembre</span>
<span class="number">26</span>
<span class="time">15:00</span>
<span class="day">Gio</span>
</div>
<div class="logoSquadra"><span class="helper"></span><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>
<div class="nameEventLocation" id="nameEventLocation1">
<strong class="eventname">New Basket Brindisi - Cremonese</strong>
<span class="location">Nome Stadio</span>
</div>
<div class="logoSquadra"><img name="" src="images/logo_nbb.png" alt="" style="background-color: #003399"></div>
<div class="noteEvento">Aquistabili online fino al xx dicemnre, ore 20.00</div>
<div class="buttonDiv">
<p>
<a class="multi-line-button green" href="#" style="width:14em">
<span class="title">Compra Ora!</span>
<span class="subtitle">30-days free!</span>
</a>
</p>
</div>
</div>
</div>
What am I doing wrong? Can somebody please help me?
Thank you very much in advance for your time.
Im confused, you want this?
CSS:
.contentEventItem {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
position: relative;
border: 1px solid #000;
/* this last one is now working*/
}
All I have done is add border: 1px solid #000; and deleted this odd HTML:
border:solid="" red;="" border-width:5px="" 0;="" "=""
DEMO HERE
border-width:5px 0;
There is no shorthand for more than one border position. Try this instead.
border-bottom: 5px solid red;
border-top: 5px solid red;
border-left:none;
border-right:none;
Related
I'm trying to apply responsive design in sendGrid. When I preview it in the website preview it is working, but when I send the test email and view it on mobile, I see that the #media screen has not been applied. Does anyone know what could be happening?
{{#if rewardData.deals.[0].coupon}}
<style>
#media screen and (max-width:300px) {
.teste {
width: 100% !important;
}
.firstDiv {
display: inline-block !important;
}
}
</style>
<div class="firstDiv" style="display: flex;
align-items: center;
border: 1px solid #D9D9D9;
border-radius: 8.49px;
padding: 16px;
margin: 35px 35px 25px 28px;">
<div class="teste" style="text-align:left; display: inline-block; margin-right: 16px">
<img class="max-width" style="border-radius: 8px" data-proportionally-constrained="true" data-responsive="false" src="{{rewardData.deals.[0].wideBanner}}" alt="Banner da recompensa">
</div>
<div class="teste" style="display: inline-block;">
<div style="display: flex; align-items: center; margin-bottom: 14px">
<img style="border-radius: 8px; margin-right: 8px" width="32" src="{{rewardData.deals.[0].icon}}" alt="Logo da recompensa">
<p style="display: inline-block; vertical-align: super">{{rewardData.deals.[0].title}}</p><br>
</div>
<b style="font-size: 12px; text-align: left; color: #2B332E">{{rewardData.deals.[0].shortDescription}}</b><br><br>
<b style="font-size: 12px; text-align: left;">Resgatar recompensa</b>
</div>
</div>
<div style="font-family: inherit; text-align: inherit; color: #000000; font-family: helvetica, monospace; font-size: 14px; margin-bottom: 50px; margin-top: 25px; margin-bottom: 25px; padding: 0px 40px">
<img class="max-width" border="0" style="color: #000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; vertical-align: bottom;" width="16" alt="" data-proportionally-constrained="true" data-responsive="true" src="http://cdn.mcauto-images-production.sendgrid.net/92d7128873c0e80b/6ee5ec4b-aaad-46cb-9c96-d5d61fb7231d/72x72.png">
<strong style="padding-left: 5px">Como usar minha recompensa?</strong><br><br>
<div style="line-height: 18px">
{{rewardData.deals.[0].description}}
<b>Seu voucher tem validade de até 30 dias para ser usado.</b>
</div>
</div>
{{/if}}
Many email clients do not support #media statements.
The website preview is a useful tool to preview your work, however it cannot show how an email will render across different mail clients.
Is there a way you can achieve your responsivenice without a media query?
Many mobiles are more than 300px wide, so try increasing the max-width from 300 to about 450.
Otherwise, take note of which email client you sent to and whether it supports media queries: https://www.caniemail.com/features/css-at-media/
There's quite a lot of code you use that is not supported. Email has an added layer or two to web design, in that email clients only accept a subset of HTML & CSS - more akin to HTML4 and CSS2, but there are lots of exceptions.
So, it may also not be working because flex is not supported, or align-items (flex is more widely supported, but all of the other parts of flexbox like align-items are very poorly supported).
I'd suggest you take a totally different approach and you'd need to research how to do a responsive HTML email as the topic is much too large for one question.
This is my first post, and I apologize- pretty much a newbie. I have tried every technique that I can think of, and cant figure out how to create borders around three specific pictures in my site. My site is glh222.github.io
You will notice 6 images, three of which are bordered and sized appropriately and the other 3 which are enormously big. I have edited all pictures to be 285px, and my code in the HTML and CSS is consistent. I will post the code to both the relevant sections of the html and css below, please let me know if anyone can help. Thanks in advance!
<section id="GT">
<a href="#">
<img src="Images/gtsport.jpg" alt="Granturismo on an open road">
<p>Granturismo</p>
</a>
</section>
<section id="GTC">
<a href="#">
<img src="Images/GTC.jpg" alt="Granturismo Convertible">
<p>Granturismo Convertible</p>
</a>
</section>
<section id="GHIBLI">
<a href="#">
<img src="Images/GhibliSnow.jpg" alt="Ghibli in the snow">
<p>Ghibli</p>
</a>
</section>
<section id="GHIBLISQ4"
<a href="#">
<img src="Images/GTSLogo1.jpg" alt="SQ4 Logo">
<p>Ghibli SQ4</p>
</a>
</section>
<section id="QP"
<a href="#">
<img src="Images/QPblur1.jpg" alt="QP blurred">
<p>Quattroporte</p>
</a>
</section>
<section id="QPS"
<a href="#">
<img src="Images/GTSrear1.jpg" alt="Rear Facing in the snow">
<p>Quattroporte GTS</p>
</a>
</section>
CSS
#GT img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
float: left;
}
#GTC
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#GHIBLI
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#GHIBLISQ4
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#QP
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
#QPS
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}
a:hover {
background-color: #aaaaaa;
Looks like you aren't getting the borders on the bottom 3 because your code is broken in multiple areas.
First, you have an extra:
<link href=
near the top of your page and
you are missing a > at the end of these three lines:
<section id="GHIBLISQ4"
should be:
<section id="GHIBLISQ4">
same goes for:
<section id="QP"
should be:
<section id="QP">
and
<section id="QPS"
should be:
<section id="QPS">
Your full code should look like this:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>"Maserati of Long Island"</title>
</head>
<body>
<header>
<h1> Welcome to Maserati of Long Island, A Division of The Experience Auto Group
Maserati...The Absolute Opposite of Ordinary</h1>
</header>
<div id="slogan">
<h2>Long Island's only factory authorized dealership</h2>
</div>
<section id="GT">
<a href="#">
<img src="Images/gtsport.jpg" alt="Granturismo on an open road">
<p>Granturismo</p>
</a>
</section>
<section id="GTC">
<a href="#">
<img src="Images/GTC.jpg" alt="Granturismo Convertible">
<p>Granturismo Convertible</p>
</a>
</section>
<section id="GHIBLI">
<a href="#">
<img src="Images/GhibliSnow.jpg" alt="Ghibli in the snow">
<p>Ghibli</p>
</a>
</section>
<section id="GHIBLISQ4">
<a href="#">
<img src="Images/GTSLogo1.jpg" alt="SQ4 Logo">
<p>Ghibli SQ4</p>
</a>
</section>
<section id="QP">
<a href="#">
<img src="Images/QPblur1.jpg" alt="QP blurred">
<p>Quattroporte</p>
</a>
</section>
<section id="QPS">
<a href="#">
<img src="Images/GTSrear1.jpg" alt="Rear Facing in the snow">
<p>Quattroporte GTS</p>
</a>
</section>
</nav>
<section id="about">
<div class="wrapper">
<h2>Operating from a state-of-the-art facility that's located in the heart of Long Island, our expertly trained staff is committed to serving each of your needs from the moment you walk through our doors, keeping one tenet in mind above all else: treating you like a member of our "family" from the moment you walk through the doors</h2>
</div>
</section>
<footer>
<p> You can contact us by calling (516) 665-1665, or if you prefer, you can stop by 65 South Service Rd, Plainview, New York 11803 and speak with us in person.</p>
</footer>
</body>
</html>
This will make your page look like the following:
Additionally, you may want to one single CSS class for your images, and then apply that class to all images instead of using separate classes for each image. This way, all your photos will be uniform and styled identically, and you won't have to write as much code.
You may also want to resize/crop your photos as well, as they are uneven right now, partially due to the fact that while they are all the same width, they are not all the same height, so some are taller than others.
AND
if you want to get rid of that gray box around your first image, remove the float:left; on the #GT img CSS
Your HTML was broken. Some of your section tags weren't closed with a >.
If you want to apply same rules to several elements, give them a class. I gave the elements class of .cars in my fix below.
You shouldn't be applying text formatting rules to an img tag, but instead the elements that actually contain some text.
You might want to use display:inline-block; and vertical-align:top; instead of float:left; because your elements have different heights.
Remove width:100% from your image if you want it to retain its original size. If you want each of the elements to have the same width, apply a width to the container (the section element) and and give the img a max-width of 100%.
.cars{
display:inline-block;
font-size: 1.5em;
font-family:'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
vertical-align:top;
}
.cars a{
display:block;
padding: .5em;
color: white;
text-decoration:none;
}
.cars p{
background-color: #aaaaaa;
}
.cars img {
background-color:#c7ccf;
border: 20px black solid;
box-sizing:border-box; /* so the sizing of the image will include its border */
}
.cars a:hover {
background-color: #aaaaaa;
}
<section id="GT" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/gtsport.jpg" alt="Granturismo on an open road">
<p>Granturismo</p>
</a>
</section>
<section id="GTC" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GTC.jpg" alt="Granturismo Convertible">
<p>Granturismo Convertible</p>
</a>
</section>
<section id="GHIBLI" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GhibliSnow.jpg" alt="Ghibli in the snow">
<p>Ghibli</p>
</a>
</section>
<section id="GHIBLISQ4" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GTSLogo1.jpg" alt="SQ4 Logo">
<p>Ghibli SQ4</p>
</a>
</section>
<section id="QP" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/QPblur1.jpg" alt="QP blurred">
<p>Quattroporte</p>
</a>
</section>
<section id="QPS" class="cars">
<a href="#">
<img src="http://glh222.github.io/Images/GTSrear1.jpg" alt="Rear Facing in the snow">
<p>Quattroporte GTS</p>
</a>
</section>
I need to make a page like this(task)
But my page looks like this.
Elements in the second cell are not on the same level as elements in the cell 1 and cell 3. Also two buttons on page are not on the same level too - button with price is a little higher than button with text.
How to solve this problem?
Every cell in my table looks like this
<td id="cell2">
<img src="pic2.png">
<p class="specs">
Тип: Светильник потолочный<br>
Фабрика: ST Luce<br>
Страна: Италия<br>
</p>
<p class="desc">
Светильник потолочный ST Luce<br> серии SL600,<br> артикул SL600.542.05
</p>
<button class="price">6784р</button>
<button class="order">Заказать</button>
</td>
Link to the fiddle
http://jsfiddle.net/dNfvz/1/
Also how to set space between cells?
Vertical align top is what you are looking for
table td {
border: 2px solid #A09A82;
padding: 5px 5px;
vertical-align:top; //add this
}
The button will require positioning to keep them on the same level, for example with position absolute
http://jsfiddle.net/dNfvz/3/
The other answers are not correct. You can't use positioning in table cells. So position: relative; for a td is not possible! So you can't archive what you want with tables and position relative.
Option 1:
Wrap the content above the buttons with a div and give it a fixed height. Then you can garantuee that the buttons are at the same position.
The tds need vertical-align: top; to align the content at the top.
Option 2:
I personally don't like tables so i tried to get rid of them. I made an example with your code.
<body>
<div id="container">
<div id="table">
<div>
<div id="cell1">
<div class="cell_wrap">
<img src="pic1.png" />
<p class="specs">Тип: Спот
<br/>Фабрика: Novotech
<br/>Страна: Венгрия
<br/>
</p>
<p class="desc">Спот Novotech серии Crystal-LED,
<br/>артикул 357012</p>
<div class="button_wrap">
<button class="price">735р</button>
<button class="order">Заказать</button>
</div>
</div>
</div>
<div id="cell2">
<img src="pic2.png" />
<p class="specs">Тип: Светильник потолочный
<br/>Фабрика: ST Luce
<br/>Страна: Италия
<br/>
</p>
<p class="desc">Светильник потолочный ST Luce
<br/>серии SL600,
<br/>артикул SL600.542.05</p>
<div class="button_wrap">
<button class="price">735р</button>
<button class="order">Заказать</button>
</div>
</div>
<div id="cell3">
<img src="pic3.png" />
<p class="specs">Тип: Подвес
<br/>Фабрика: ArteLamp
<br/>Страна: Италия
<br/>
</p>
<p class="desc">Подвес ArteLamp серии JERSEY,
<br/>артикул A8543LM-6GO</p>
<div class="button_wrap">
<button class="price">735р</button>
<button class="order">Заказать</button>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/Qd48A/
The only problem I still have is that you have to set a fixed height for the rows. I don't know exactly your situation but maybe for it's no problem.
Try adding valign="top" to your td's and then position your buttons to the bottom of the cell with css position :)
Maybe this will work for you: http://jsfiddle.net/dNfvz/2/
<!-- HTML -->
<div class="action">
<button class="price">735р</button>
<button class="order">Заказать</button>
</div>
/** CSS **/
table td {
border: 2px solid #A09A82;
padding: 5px 5px 50px;
position: relative;
}
div.action {
position: absolute;
bottom: 10px;
}
changes
table td {
position: relative;
border: 2px solid #A09A82;
padding: 5px 5px;
}
button.price, button.order {
position: absolute;
bottom: 3px;
}
button.price {
left: 20px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b5b4b3), color-stop(1, #141414) );
background:-moz-linear-gradient( center top, #b5b4b3 5%, #141414 100% );
background-color:#b5b4b3;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
text-indent:-11.25px;
border:1px solid #ded5de;
display:inline-block;
color:#ffffff;
font-family:Courier New;
font-size:15px;
/*font-weight:bold;*/
font-style:normal;
height:25px;
line-height:25px;
width:75px;
text-decoration:none;
text-align:center;
pointer-events:none;
}
button.order {
right: 20px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #bfbfbf) );
background:-moz-linear-gradient( center top, #ffffff 5%, #bfbfbf 100% );
background-color:#ffffff;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
text-indent:0px;
border:1px solid #ffffff;
display:inline-block;
color:#db1818;
font-family:Courier New;
font-size:12px;
font-weight:bold;
font-style:normal;
height:25px;
line-height:25px;
width:84px;
text-decoration:none;
text-align:center;
margin-left: -18pt;
margin-top: 50pt;
}
I am new to coding HTML/CSS but I have a pretty good grasp so far. I have spent the last few hours trying to get my code side by side but it always remains stacked. My code is
<div class="api" style="float:left;">
<a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
<div>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
And my CSS is,
.api {
margin: 0 auto;
margin-top: 1em;
max-width: 700px;
padding: 1em;
background-color: #e2e2e2;
border: 1px solid #C9C9C9;
box-shadow: 0 0 2px #C9C9C9;
-moz-box-shadow: 0 0 2px #C9C9C9;
-webkit-box-shadow: 0 0 2px #C9C9C9;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
}
If you tell me what I am missing in order to get the info displayed side by side I would greatly appreciate it. If you have any other code cleanups that you can point out that would be great also but not needed.
EDIT:
Thank you for all your help guys, I have tried both Watson and Pete's answers but sadly they are not working. I took some screenshots of what it is without your code and with your code. You can find them here, https://dl.dropbox.com/u/11217802/sidebyside.png
I have also been able to get it working but I am trying to avoid as much inline styling as possible and I believe that I have pointless tags and way too many <div> for this small project.
<div class="api">
<div>
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:100%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
</td>
</div>
<div style="float: left;">
<div class="appbrain-app">
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
As far as the CSS, that did not change from what I posted orginally.
Thanks again Grady
try this:
.api a, .api div, .api img {
float: left;
}
and a tip: you should indent your code, so the child nodes are inside the parent nodes, like:
<div>
<a>Example</a>
<img>
<div>
<a>Example</a>
</div>
</div>
sibling nodes (when one tag is not inside another) should be indented the same amount.
looking at your code you have only floated the containing div, all the divs inside it are still block elements, if you want these to be side by side, you can do one of the following:
change them to inline elements .api div {display:inline;}
change them to inline-block elements .api div {display:inline-block;}
float them left .api div {float:left;}
EDIT
Having looked at your edit and tried your code in jsfiddle, the problem is the javascript is creating a lot of extra divs. I have changed your code layout to get things side by side:
http://jsfiddle.net/xFu4Z/1/
html
<div class="api">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play" />
</div>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'></a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
CSS
.api,
.appbrain-app {float:left;}
Please note that you will need to make sure the widths of .api and .appbrain-app added together don't exceed the width of the container they are in - I just noticed that on your original styles you have set a max-width of 700px which means that it is probably going to push the .appbrain-app div down a line
I restructured your markup:
<style>.api {
margin: 0 auto;
margin-top: 1em;
max-width: 700px;
min-width: 300px;
padding: 1em;
background-color: #e2e2e2;
border: 1px solid #C9C9C9;
box-shadow: 0 0 2px #C9C9C9;
-moz-box-shadow: 0 0 2px #C9C9C9;
-webkit-box-shadow: 0 0 2px #C9C9C9;
border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
}
.appbrain-app { float: right; width: 48%; border: 1px solid red; }
</style>
<div class="api" style="float:left;">
<div>
<a href="https://play.google.com/store/apps/details?id=com.jrummy.liberty.toolboxpro" target="_blank">
<img src="http://developer.android.com/images/brand/en_generic_rgb_wo_60.png" style="width:50%; border:0" alt="Download ROM Toolbox Pro from Google Play" title="Download ROM Toolbox Pro from Google Play">
</a>
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/com.jrummy.liberty.toolboxpro' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
I have a margin used to space some headings down away from an image, but despite this method working on other pages, it does not in this instance.
I know there are plenty of alternative solutions, but am curious as to what is wrong with this one. Can anyone help?
<div class="column" style="width: 237px">
<img src="img.jpg" alt="" title="img" width="237" height="300" class="alignnone size-full wp-image-84" />
<h1 style="margin-top: 40px">VAL</h1>
<span class="detailhead">Heading 1</span> <span class="detail">Detail 1</span><br />
<span class="detailhead">Heading 2</span> <span class="detail">Detail 2</span>
</div>
These are all the additional class declarations:
The image class has no associated style (class was inserted by Wordpress).
h1 {
font-size: 17px;
}
span.detailhead{
font-size: 13px;
color:#000000;
}
span.detail {
position: relative;
top: 1.5px;
font-size: 14px;
color:#000000;
}
.column {
display: block;
float: left;
}
Here is the offending style i overlooked:
img {
display: block;
float:left;
margin-right:10px;
margin-bottom:10px;
border-style: solid;
border-width: 1px;
border-color: #ffffff;
z-index: 2;
}
A more specific selector fixed the issue.
Thanks to all for helping me with this seriously schoolboy error!
Could you try adding a style="display:block" to the img tag?
If your using chrome or safari for testing: use the element inspector to check wether your inline setting is not overruled by an !important; declaration in one of the classes.
Edit: To quickly test this you can also add " !important;" to your inline css.