9 replies [Last post]
tomislavstancovic
Offline
newbie
Last seen: 14 years 29 weeks ago
Joined: 2007-07-05
Posts: 5
Points: 0

I am a bit new to divs and am struggeling hard with getting it to work in firefox.

Div and firefox is driving me crazy, I have spent long time to try figure out a solution but cannot succeed. I have twisted and turned every div parameter i know but cannot get it to work. Can some one help me please...

With which div parameter can I prevent this. See attached illustration. I want it to work as in Internet explorer.

Code in CSS:

#dh-block .form-element {
height:24px;
padding-left:0px;
}

#dh-block .form-element .col-1 {
width:50px;
font-size:1.2em;
padding-left:0px;
}

#dh-block .col-2 {
height:24px;
width:220px;
padding-left:0px;
}

#dh-block .col-3 {
height:24px;
width:220px;
padding-left:0px;
}

Code in the html:




Namn 1 








Namn 2 








AttachmentSize
firefox-problem.gif2.86 KB
Triumph (not verified)
Anonymous's picture
Guru

http://csscreator.com/node/19

tomislavstancovic
Offline
newbie
Last seen: 14 years 29 weeks ago
Joined: 2007-07-05
Posts: 5
Points: 0

sorry... !! first time for

sorry... !! Smile first time for everything... any one that can help me out with my problem? I would apritieate very much...

//t.

Triumph (not verified)
Anonymous's picture
Guru

tomislavstancovic

tomislavstancovic wrote:
sorry... !! Smile first time for everything... any one that can help me out with my problem? I would apritieate very much...

Well, let us know when you want to post all your code and I'm sure someone will take a look.

tomislavstancovic
Offline
newbie
Last seen: 14 years 29 weeks ago
Joined: 2007-07-05
Posts: 5
Points: 0

Ops, sorry about that. DIV

Ops, sorry about that. DIV is not my strong side in life and hope someone can help me out. Here we go,

CSS:

body {
margin:0;
padding:0;
background:url('/images/background/tile_purple.gif');
font-family:Verdana, sans-serif;
font-size:0.6em;
}

form {
margin:0;
padding:0;
}

img {
border:none;
}

input, select, textarea {
font-family:Verdana, sans-serif;
font-size:1em;
color:#1961AD;
}

input.input-submit {
color:#555;
}

/* ------------------------------------------------------------------------------------------- */

.dh-default-container {
float:left;
display:block;
}

.dh-form-container {
float:left;
display:block;
width:100%;
}

.dh-block .dh-inner-block {
height:250px;
padding:0 7px 0 7px;

}

.dh-grey-block {
border:1px solid #ECEAF4;
background-color:#ECEAF4;
color:#1961AD;
height:100px;
width:180px;
}

.dh-divider {
margin:0;
padding:0;
width:100%;
clear:both;
}

.dh-divider .dh-divider-inner {
height:1px;
display:block;
float:left;
width:100%;
margin:0 0 7px 0;
}

.dh-grey-block .dh-divider .dh-divider-inner {
background-color:#A5E13C;
}

/* default */
.dh-form-title {
margin:0 0 3px 0;
display:block;
font-size:1.1em;
}

.dh-form-element {
margin:0 0 6px 0;
display:block;
}

#dh-block-name-1 .form-element {
height:24px;
padding-left:0px;
}

#dh-block-name-1 .form-element .col-1 {
width:50px;
font-size:1.2em;
padding-left:0px;
}

#dh-block-name-1 .col-2 {
height:24px;
width:220px;
padding-left:0px;
}

#dh-block-name-1 .col-3 {
height:24px;
width:220px;
padding-left:0px;
}

#dh-block-name-1 .col-2 input, #dh-block-name-1 .col-2 select {
width:160px;
}

HTML:


@import "default-error.css";







Namn 1 








Namn 2 










basically in firefox the text is overlaping the input box, how can i make it look like in internet explorer? Also I would like the "Name 1" and "Name 2" be next to each other if possible--

Thanks, n let me know if i neeed to submit further input...

Best Regards,
t.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 20 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Why are you using so many

Why are you using so many divs and classes? Most of that code is unnecessary.

Verschwindende wrote:
  • CSS doesn't make pies

Triumph (not verified)
Anonymous's picture
Guru

thepineapplehead wrote:Why

thepineapplehead wrote:
Why are you using so many divs and classes? Most of that code is unnecessary.

Look into the proper markup of forms. You should be using labels instead of divs for the form labels.

You should also ensure that your code is valid.

The problem is probably here:#dh-block-name-1 .form-element

I'm wondering why are you using double classes on so many elements.

tomislavstancovic
Offline
newbie
Last seen: 14 years 29 weeks ago
Joined: 2007-07-05
Posts: 5
Points: 0

Thanks... the thing is a

Thanks... the thing is a received the code from a developer that "knows" this stuff. Now I am maintaining this mess Smile i am more of a db guy ...

I have been spending long hours trying to figure out the solution but no success. I have tried to elabortate with many different parameter but no success Sad I dont want to rewrite everything at this point an just fix this specific problem.

Any ideas on how I can sovle this with existing code in the #dh-block-name-1 .form-element?

Any tips on where I can read more about labels?

//t.

Triumph (not verified)
Anonymous's picture
Guru

tomislavstancovic wrote:Any

tomislavstancovic wrote:
Any ideas on how I can sovle this with existing code in the #dh-block-name-1 .form-element?
Try getting rid of the height.
tomislavstancovic wrote:

Any tips on where I can read more about labels?

You can look at this thread to start: http://csscreator.com/node/12568

tomislavstancovic
Offline
newbie
Last seen: 14 years 29 weeks ago
Joined: 2007-07-05
Posts: 5
Points: 0

Thanks for your input! Very

Thanks for your input! Very helpful, think i solved it!

//t.