Div CSS Cancelling out

jj72uk · 08-11-2011, 06:23 PM

I'm a duck out of water when it comes to CSS and I profess no background in it, and openly admit generally I'm wading in the deep.

I'm a bit confused why the below code isn't working, whether its my lack of understanding or if what I'm trying to do is impossible I don't know..

Basic code... there's more 'meat' the the css class' but you'll get the gist..

Code:

CSS:

div.xdiv
{
margin-left: 450px;
}
div.zdiv
{
margin-left: 460px;
font-family:"Times New Roman", Times, serif;
}

HTML section:

Code:

<div class="xdiv"><img src="angry.gif" alt="Angry face" /></div>
<div class="zdiv">Some text goes here</div>

What ever I have tried the second div class never ever works.

I've tried inspecting it via chrome but chrome doesn't see the linked CSS.

I'm at a loss!

Any education would be appreciated.

resdog · 08-11-2011, 06:56 PM

what are you trying to accomplish and what is happening?

according to the code you gave, the xdiv will start off 450px from the left and the zdiv will be under that, 460px from the left. Is that not what is happening?

jj72uk · 08-11-2011, 07:01 PM

Thats exactly what I expect to happen. Problem is zdiv doesn't style the text, or move the text in by 460px.

Basically it looks (via chrome) that it doesn't use zdiv

resdog · 08-11-2011, 07:10 PM

What does it do? When I create this html file, it looks like it should. Since you didn't show all the code, my guess is that there is some other code that is overriding this piece. I say that because the default font family on a website is times new roman. since you are assigning it here, did you change the default elsewhere in your css? Can you post all of your code so we can troubleshoot why it doesn't work as you think?

vikram1vicky · 08-11-2011, 08:30 PM

It is better to share link of your page or share as attachment here of your full code... than only we can help you out in better way...

Check if you have defined class zdiv twice in your CSS with different CSS properties

jj72uk · 08-12-2011, 08:32 AM

I can't post a link as its an internal page but I can post the code...

HTML Code: I won't post all of it as it has ASP (classic) within it but I will post just past the point.

zdiv in my CSS (as you'll see in my code) has only been defined once. My CSS is poor I know...

Code:

<%@ Language="VBScript" %>
<% Option Explicit %>

<!-- THIS IS FOR DATA INCIDENTS ONLY-->

<html>
<head>

<title>New MI Incident</title>

<script language="javascript" type="text/javascript" src="datetimepicker_css.js">

</script>

<script>

function limitText(limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } 
}

function autotab(original,destination){
if (original.getAttribute&&original.value.length==original.getAttribute("maxlength"))
destination.focus()
}

</script>

<link rel="stylesheet" type="text/css" href="incident.css" media ="screen">
<link media="screen" href="./homepage.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<form><input type="button" value="Back" class="button" onclick="history.go(-1);return false;" /></form> 

<div class='divx'>
<img src="images/logo_insurance1_bg.gif" border="0" alt="RBS Insurance Logo"/></div>
<br>
<div class="divz">
MI Risk Management - New DATA Incident
</div>


<%

'Option Explicit 
Dim strConnection, conn, rs, strSQL 
Dim xdate, zdate, IncLevel

xdate = (now())
zdate = (date())

IncLevel = 1

Session.LCID = 2057 'Hex value for the UK

blah..blah..blah..ASP onwards...

CSS code... the xdiv/zdiv are at the bottom..

Code:

.first { 
overflow:hidden;
width: 500px;
height: 82px;
margin-left: 350px; 
border-top: 1px solid;
border-right: 1px solid;
border-left: 1px solid;
border-bottom: 1px transparent;
_border-right-color: black;
_border-left-color: black;
_border-top-color: black;
_border-bottom-color: pink;
_filter: chroma(color=pink);

} 

.second { 
overflow:hidden;
width: 500px;
height: 82px;
margin-left: 350px; 
margin-bottom: -2px;
margin-top: -2px;
border-top: 1px transparent;
border-right: 1px solid;
border-left: 1px solid;
border-bottom: 1px transparent;
_border-right-color: black;
_border-left-color: black;
_border-top-color: pink;
_border-bottom-color: pink;
_filter: chroma(color=pink);

} 

.third { 
overflow:hidden;
width: 500px;
height: 82px; 
margin-left: 350px;
border-top: 1px transparent;
border-right: 1px solid;
border-left: 1px solid;
border-bottom: 1px solid;
_border-right-color: black;
_border-left-color: black;
_border-bottom-color: black;
_border-top-color: pink;
_filter: chroma(color=pink);

}

.button 
{
    width: 44px;
    height; 16px;
    border: 1px solid #9cf;
    background: #036;
    font-weight: bold;
    font-size: 11px;
    text-align: center;    
    color: white;
}


.Owner
{
	margin-left: 10px;
	border-width: 1px;
	border-color: black;
	width: 175px;
	font-family: Trebuchet MS;
}

.Date
{
	margin-left: 24px;
	border-width: 1px;
	border-color: black;
	width: 175px;
	font-family: Trebuchet MS;
}

.ref
{
	margin-left: 12px;
	border-width: 1px;
	border-color: black;
	width:175px;
	font-family: Trebuchet MS;
}

.Type
{
	margin-left: 23px;
	width: 175px;
	border-width: 1px;
	border-color: black;
	font-family: Trebuchet MS;
}

.IncType
{
	margin-left: 28px;
	width: 175px;
	border-width: 1px;
	border-color: black;
	font-family: Trebuchet MS;
}

.Brief
{
	margin-left: 28px;
	width: 175px;
	border-width: 1px;
	border-color: black;
	font-family: Trebuchet MS;
}

.UpdBrief
{
	margin-left: 26px;
	border-width: 1px;
	border-color: black;
	font-family: Trebuchet MS;
}

.stage
{
	margin-left: 19px;
	border-width: 1px;
	width: 175px;
	border-color: black;
	font-family: Trebuchet MS;
}

.CurrETA
{
	margin-left: 17px;
	border-width: 1px;
	width: 175px;
	border-color: black;
	font-family: Trebuchet MS;
}

.NxtETA
{
	margin-left: 14px;
	border-width: 1px;
	width: 175px;
	border-color: black;
	font-family: Trebuchet MS;
}


B
{
	Margin-left: 285px;
	font-family: Trebuchet MS;
	font-size: 16px;
	font-weight: normal;
	color: black;
}	

A
{
	Margin-left: 155px;
	font-family: Trebuchet MS;
	font-size: 16px;
	font-weight: normal;
	color: black;
}
div.nxtupd
{
	Margin-left: 235px;
	font-family: Trebuchet MS;
	font-size: 16px;
	font-weight: normal;
	color: black;
}	

div.xdiv
{
	margin-left: 265px;
	margin-top: 25px;
	margin-bottom: 40px
}

div.zdiv
(
	margin-left: 290px;
	font-family: Trebuchet MS;
	font-size: 16px;
	font-weight: normal;
}

Thanks.

resdog · 08-12-2011, 01:58 PM

If this is your actual code, here's the problems I noticed:

In the CSS, you are coding "xdiv" and "zdiv", but in the HTML, you have them named as "divx" and "divz".

Also, for div.zdiv, your opening bracket is actually a parenthesis, it should be a curly bracket.

See if fixing those fixes the issue.