PDA

View Full Version : HTML Experts

Treasured Soul
19-04-08, 05:38 PM
:salams

I hope someone can help me/guide me in the right direction, Insha'Allah ...

I have a webpage, it displays fine in IE but seems to add some kinda padding in Firefox. Which is kinda weird, cuz the problems are normally the other way around!

I have an outer div and an inner div. Both are left align and should have no padding. But the inner div has a bit of padding in firefox :(

this is the css for both divs ...



/* Reset Standard Values */
html, body, div, span, applet,object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}

ol, ul {list-style: none;}

/* GeneralArea */
html{margin:0;height:100%;font-family:Arial, Helvetica, sans-serif;color:#333333;}
body{background-color:#FFFFFF;}
a{text-decoration:none;color:#333333;}
a:hover{text-decoration:underline;}
div#SiteContainer{width:890px;margin:auto;height:a uto;min-height:100%;}

/* BodyContent */
#BodyContent{float:left;width:890px;margin:13px 0px;min-height:300px;}

and the html

<body>

<div id="SiteContainer">

<%@ include file="../include/LayoutContainerTop.jspf"%>

<div id="BodyContent">

<!--MAIN CONTENT STARTS HERE-->


<h1><fmt:message key="CONTACT_US2" bundle="${storeText}" /></h1>


<!--MAIN CONTENT ENDS HERE-->

</div>

<%@ include file="../include/LayoutContainerBottom.jspf"%>

</div>

<flow:ifEnabled feature="Coremetrics">
<cm: pageview/>
</flow:ifEnabled>

</body>


I've tried taking prtsc to show u, but it wont work :(

but the problem has to do with the <div id="BodyContent">

I hope someone can help ..

Iv had this problem for too long and Im actually falling behind at work now :torture:
Al-Nasser
19-04-08, 05:53 PM
can you show us the url of this page?...because the html code you posted is messed up
Al-Nasser
19-04-08, 05:57 PM
ah well

from what i see FF didn't make any mistake rendering your css instruction

it simply centered the BodyContent and SiteContainer div because you set the left and right margins to "auto"....and this center the div given you set the width.....

so remove the width value from

div#SiteContainer{width:890px;margin:auto;height:a uto;min-height:100%;}

so it become

div#SiteContainer{margin:auto;height:auto;min-height:100%;}

and this will fix your problem
Treasured Soul
19-04-08, 06:10 PM
thanks for that bro .. i'll try it now ...

yes, the contents are centered ... and i think thats how they want their site like that ...

cuz the damn prtsc doesnt work, i cant show u :(

just imagine

this is the header
the content should be aligned as such ... <<< 'the' should be aligned with 'this' on top

but in firefox

this is the header
...the content starts here
^i dont want that gap

but overall, yes the page should fall into the center


sorry, i cant send the url, im working on it locally in my vm :(
Al-Nasser
19-04-08, 06:11 PM
oh...you need the site centered....didn't know that
Treasured Soul
19-04-08, 06:17 PM
okays .. i tried that .. and everything just moved to the left .. so now i understand what u were saying.

i hope my earlier post about the header and the content both being aligned left makes sense
Al-Nasser
19-04-08, 06:20 PM
yes...i didn't know you need the site centered when i posted the previous solution

look now...try this

remove the float property from

#BodyContent{float:left;width:890px;margin:13px 0px;min-height:300px;}

or change it to float:right;

or "clear:both;" if you are really desperate

sorry if this doesn't help.....my options are pretty limited as i don't have full working html page to look at
Treasured Soul
19-04-08, 06:23 PM
what does the clear:both do?
Treasured Soul
19-04-08, 06:24 PM
i cud send u the pages .. but then ul have alot of pages to go through ... as im trying to implement the site into commerce and theres just snippets all over the place :(
Al-Nasser
19-04-08, 06:26 PM
if you have two columns aligned beside each other then you want to put a third div just under them you use clear both on this div

div ------------------------ div
{-------"clear both" div--------}


div --------------------------- div
--------{---no clear both divs----}
Al-Nasser
19-04-08, 06:27 PM
i cud send u the pages .. but then ul have alot of pages to go through ... as im trying to implement the site into commerce and theres just snippets all over the place :(

just view the page in your browser then save it to your harddisk and send it to me...use any sharing website like rapidshare or whatever
nami
19-04-08, 06:30 PM
Have you got your pages configured to force IE out of quirks mode?
Treasured Soul
19-04-08, 06:38 PM
the clear both doesnt work either ... cuz it does place it underneath anyways .. but for some reason firefox thinks theres a some kinda margin or padding, when there isnt.

if i place margin-left:-5px; into the contentBody div ... so ...
#BodyContent{float:left;width:890px;margin:13px 0px;min-height:300px;margin-left:-5px;}, it shifts it over to the right place ... but it also shifts it in ie :(

do u have an inkling why?



i hate html :torture:
Al-Nasser
19-04-08, 06:40 PM
the clear both doesnt work either ... cuz it does place it underneath anyways .. but for some reason firefox thinks theres a some kinda margin or padding, when there isnt.

if i place margin-left:-5px; into the contentBody div ... so ...
#BodyContent{float:left;width:890px;margin:13px 0px;min-height:300px;margin-left:-5px;}, it shifts it over to the right place ... but it also shifts it in ie :(

do u have an inkling why?



i hate html :torture:

there is an easy solution to that specific problem

#BodyContent{
float:left;
width:890px;
margin-left:-5px !important;
margin:13px 0px;
min-height:300px;
},

this will make the margin appear in ff only

the "!important" directive tell firefox that this property has high priority.....IE ignore that...

so IE read that margin is -5....aye aye sir, margin set to -5
next line IE read new orders...margin set to 0 : aye aye, sir...old orders scrapped....new margin = 0

firefox don't do that....no matter how many times you tell him to use new margins he will give precedence to the order which is signed "!important"
Treasured Soul
19-04-08, 07:28 PM
that didnt work :(

iv tried using !important on other things before, but it never worked, so gave up on it :o

I've uploaded the files, I'll PM the link

jazakallahkhair for your help bro.
Treasured Soul
19-04-08, 07:29 PM
Have you got your pages configured to force IE out of quirks mode?

how do u do that?

but im not having problems with ie .. its firefox :(
Al-Nasser
19-04-08, 07:52 PM
that didnt work :(

iv tried using !important on other things before, but it never worked, so gave up on it :o

I've uploaded the files, I'll PM the link

jazakallahkhair for your help bro.

hmmm

i tried on the files you sent and it worked perfectly!

before
#BodyContent{float:left;width:890px; margin:13px 0px;min-height:300px;}
after

#BodyContent{float:left;width:890px;margin-left:-15px !important; margin:13px 0px;min-height:300px;}

also noticed some error

.HomeLeftMenu{float:left;width:199px;margin:0px;pa dding:0px;margin-right:8px;margin-left:0px; padding-left;0px;}

change the semicolon to ":"
Treasured Soul
19-04-08, 08:13 PM
thanks for that .. but its not working :(

im loosing 10px of the left menu ... u can tell more if you have the images.


thanks for the spottin the syntax error .. thats just something i think i was trying for this problem :(


Thanks for your time bro .. i really appreciate it :)
nami
19-04-08, 08:43 PM
how do u do that?

but im not having problems with ie .. its firefox :(

Give this ago and see what effect it has on ie and fx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>

<body>
<form id="form1" method="post" action="yourpage.html">
</form>
</body>
</html>
Treasured Soul
19-04-08, 09:01 PM
No, it didnt have any affect on the way its displaying :(
MMS
19-04-08, 09:27 PM
BodyContent {
float:left;
width:890px;
-margin:13px 0px;
min-height:300px;
}

what happens if you put that lil dash before margin??
Treasured Soul
19-04-08, 09:35 PM
i think it just ignores the margin atribute cuz it takes away the top margin (the 13px) in both browers.



Alhumdillah i only have to worry about two browsers .. imagine if i had to worry about the others too :rubeyes:
Treasured Soul
19-04-08, 11:41 PM
JazakAllah Khair brothers and sisters that helped me ... may Allah swt reward you the in the greatest ways possible, in this life and hereafter :)

Alhumdillah, I have found a hack to solve my problem ... Im going to bed one happy camper :D

Al Nasser brother ... I was reading on one of the sites, the !important hack no longer works with IE7 ... i was just curious to know which version of IE you are using? or whether that piece of information was correct?


The hack ... that I used ...

html*

so ....

this line is recognised by both ie7 and firefox:

#BodyContent{float:left;width:890px;margin:13px 0px 0px 0px;min-height:300px; margin-left:-14px;}

and this line is only recognised by ie7:

html*#BodyContent{float:left;width:890px;margin:13 px 0px 0px 0px;min-height:300px; margin-left:0px;}



Insha'Allah I wont need to worry about any other browsers ... *fingers crossed*



:hidban: :hidban: :hidban: :hidban: :hidban: :hidban: :hidban: :hidban:
Al-Nasser
19-04-08, 11:54 PM
IE7!

who said anything about IE7 ? :smack:

i use Firefox amd IE6 (from testing purpose only)

and for testing on a large collection of browsers and operation systems i use http://browsershots.org/
nami
20-04-08, 09:14 AM
Good to hear you got it working! :up:
Treasured Soul
22-04-08, 12:24 PM
^^ thanks bro!

IE7!

who said anything about IE7 ? :smack:

i use Firefox amd IE6 (from testing purpose only)

and for testing on a large collection of browsers and operation systems i use http://browsershots.org/

oops :(

i was soo tired and stress that day .. i forgot to tel ya the basics ... sorry =(

i do have to carry out test on IE6 at a later stage ... so if i have any issuess, i can use that !important hack :up:

but i think ie7 is more stringent ... and kinda covers all the issues in ie6 aswell (from what iv been told!) .. will find out soon enough :o


Oh .. just heard from project manager ... they wana change the homepage a couple of weeks before it goes live :rubeyes:

ppl .. or shall i say companies :rolleyes: