Forum:

HTML Pages with CSS and JavaScript

HTML page including image at top leaving blank space at top

Ranch Hand

Posts: 2969

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I wrote a simple JSP page as below to include an image (for banner) at top.but blank space is coming at the top the top and as a result banner is not looking proper.

Please help me modify this simple code to remove space from the top.thanks

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Use CSS to remove all margin and padding from the body element.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks.I tried the below but still the same issue. What do I have to use to remove margin from top?Please advice.

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

At no point did I say to add HTML attributes. I said:

Bear Bibeault wrote:Use CSS to remove all margin and padding from the body element.

[Asking smart questions] [About Bear] [Books by Bear]

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ok.Please tell the name of attribute I have to add as zero padding and zero margin.

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

No attributes. CSS.

Properties: padding and margin.

If you are going to be writing HTML, you need to know CSS. I suggest finding a good book or tutorial and get started learning it.

[Asking smart questions] [About Bear] [Books by Bear]

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks.I'll go by your suggestion and practice CSS in free time. However I am have to complete my current application as soon as possible. The application is complete only thing is that top space is coming above the banner.I took it as a small issue but it has taken several hours of me to resolve. I will try the step you have said.

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Add the following to the head element:

[Asking smart questions] [About Bear] [Books by Bear]

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Images do not have a closing tag, they are self closing.

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric Pascarello wrote:Images do not have a closing tag, they are self closing.

Heh. Good catch. I didn't see that in all that badly formatted code.

[Asking smart questions] [About Bear] [Books by Bear]

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks all. In case JSPpage1 includes JSPpage2 , and both have different css, which one will take precedence in the final JSP page rendered?

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Both. The browser could care less how the page was generated. It knows nothing of JSP.

The CSS will be applied according to the complex rules of CSS, which you'll need to look up.

[Asking smart questions] [About Bear] [Books by Bear]

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I did exactly as you said. Still got space at the top.

As suggested by you. Still could not get past this issue.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

img {margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;vertical-align:baseline;}

</style>

<td>

</td>

<tr>

</table>

#buttonSubmit {

color: #050;

width: 60;

font: bold 84% 'trebuchet ms', helvetica, sans-serif;

background-color: #fed;

border: 1px solid;

border-color: #696 #363 #363 #696;

filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,

StartColorStr = '#ffffffff', EndColorStr = '#ffeeddaa' );

}

#buttonClear {

color: #050;

width: 60;

font: bold 84% 'trebuchet ms', helvetica, sans-serif;

background-color: #fed;

border: 1px solid;

border-color: #696 #363 #363 #696;

filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,

StartColorStr = '#ffffffff', EndColorStr = '#ffeeddaa' );

}

#table-2 {

border: 1px solid #e3e3e3;

background-color: #f2f2f2;

width: 25%;

border-radius: 6px;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

}

#table-2 thead {

font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

padding: .2em 0 .2em .5em;

text-align: left;

color: #4B4B4B;

background-color: #C8C8C8;

background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6,#B3B3B3));

background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%);

border-bottom: solid 1px #999;

}

#table-2 th {

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

font-size: 17px;

line-height: 20px;

font-style: normal;

font-weight: normal;

text-align: center;

text-shadow: white 1px 1px 1px;

}

#table-2 td:hover {

background-color: #fff;

}

#table-2 td, #table-2 th {

color: #333;

}

#table-2 td {

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

line-height: 10px;

font-size: 14px;

border-bottom: 1px solid #fff;

border-top: 1px solid #fff;

}

#table1 {

border: 0px;

}

<style>

#buttonSubmit {

color: #050;

width: 60;

font: bold 84% 'trebuchet ms', helvetica, sans-serif;

background-color: #fed;

border: 1px solid;

border-color: #696 #363 #363 #696;

filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,

StartColorStr = '#ffffffff', EndColorStr = '#ffeeddaa' );

}

#buttonClear {

color: #050;

width: 60;

font: bold 84% 'trebuchet ms', helvetica, sans-serif;

background-color: #fed;

border: 1px solid;

border-color: #696 #363 #363 #696;

filter: progid : DXImageTransform.Microsoft.Gradient ( GradientType = 0,

StartColorStr = '#ffffffff', EndColorStr = '#ffeeddaa' );

}

table,th {

border: 1px solid green;

}

th {

background-color: green;

color: white;

}

</style>

table {

background-color: #FFFAF0

}

table th {

background-color: #A9D0F5;

}

</style>

var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

var days = new Array("S", "M", "T", "W", "T", "F", "S");

today = new getToday();

var element_id;

function getDays(month, year)

{

// Test for leap year when February is selected.

if (1 == month)

return ((0 == year % 4) && (0 != (year % 100))) ||

(0 == year % 400) ? 29 : 28;

else

return daysInMonth[month];

}

function getToday()

{

// Generate today's date.

this.now = new Date();

this.year = this.now.getFullYear() ; // Returned year XXXX

this.month = this.now.getMonth();

this.day = this.now.getDate();

}

function newCalendar()

{

var parseYear = parseInt(document.all.year  [document.all.year.selectedIndex].text);

var newCal = new Date(parseYear , document.all.month.selectedIndex, 1);

var day = -1;

var startDay = newCal.getDay();

var daily = 0;

today = new getToday(); // 1st call

if ((today.year == newCal.getFullYear() ) &&   (today.month == newCal.getMonth()))

day = today.day;

// Cache the calendar table's tBody section, dayList.

var tableCal = document.all.calendar.tBodies.dayList;

var intDaysInMonth =

getDays(newCal.getMonth(), newCal.getFullYear() );

for (var intWeek = 0; intWeek < tableCal.rows.length;  intWeek++)

for (var intDay = 0;

intDay < tableCal.rows[intWeek].cells.length;

intDay++)

{

var cell = tableCal.rows[intWeek].cells[intDay];

// Start counting days.

if ((intDay == startDay) && (0 == daily))

daily = 1;

// Highlight the current day.

cell.style.color = (day == daily) ? "red" : "";

if(day == daily)

{

document.all.todayday.innerText= "Today: " +  day + "/" +

(newCal.getMonth()+1) + "/" + newCal.getFullYear() ;

}

// Output the day number into the cell.

if ((daily > 0) && (daily <= intDaysInMonth))

cell.innerText = daily++;

else

cell.innerText = "";

}

function getTodayDay()

{

document.all[element_id].value = today.day + "/" + (today.month+1) +

"/" + today.year;

//document.all.calendar.style.visibility="hidden";

document.all.calendar.style.display="none";

document.all.year.selectedIndex =100;

document.all.month.selectedIndex = today.month;

}

function getDate()

{

// This code executes when the user clicks on a day

// in the calendar.

if ("TD" == event.srcElement.tagName)

// Test whether day is valid.

if ("" != event.srcElement.innerText)

{

var mn = document.all.month.selectedIndex+1;

var Year = document.all.year [document.all.year.selectedIndex].text;

document.all[element_id].value=event.srcElement.innerText+"/"+mn +"/"  +Year;

//document.all.calendar.style.visibility="hidden";

document.all.calendar.style.display="none";

}

function GetBodyOffsetX(el_name, shift)

{

var x;

var y;

x = 0;

y = 0;

var elem = document.all[el_name];

{

x += elem.offsetLeft;

y += elem.offsetTop;

if (elem.tagName == "BODY")

break;

elem = elem.offsetParent;

} while  (1 > 0);

shift[0] = x;

shift[1] = y;

return  x;

}

function SetCalendarOnElement(el_name)

{

if (el_name=="")

el_name = element_id;

var shift = new Array(2);

GetBodyOffsetX(el_name, shift);

document.all.calendar.style.pixelLeft  = shift[0]; //  - document.all.calendar.offsetLeft;

document.all.calendar.style.pixelTop = shift[1] + 25 ;

}

function ShowCalendar(elem_name)

{

if (elem_name=="")

elem_name = element_id;

element_id  = elem_name; // element_id is global variable

newCalendar();

SetCalendarOnElement(element_id);

//document.all.calendar.style.visibility = "visible";

document.all.calendar.style.display="inline";

}

function HideCalendar()

{

//document.all.calendar.style.visibility="hidden";

document.all.calendar.style.display="none";

}

function toggleCalendar(elem_name)

{

//if (document.all.calendar.style.visibility == "hidden")

if(document.all.calendar.style.display=="none")

ShowCalendar(elem_name);

else

HideCalendar();

}

</script>

function validateForm()

{

var listBoxSelection2=document.getElementById("recordType").value;

if(listBoxSelection2==0){

alert("Please select record type");

return false;

}

var x=document.forms["reportForm"]["mdn"].value;

if (x==null || x=="")

{

alert("Please enter mdn");

return false;

}

var listBoxSelection=document.getElementById("MyDate").value;

if(listBoxSelection==0){

alert("Please select start date");

return false;

}

var listBoxSelection1=document.getElementById("MyDate1").value;

if(listBoxSelection1==0){

alert("Please select end date");

return false;

}

else{

return true;

}

</script>

<style>

.today {

COLOR: black;

FONT-FAMILY: sans-serif;

FONT-SIZE: 10pt;

FONT-WEIGHT: bold

}

.days {

COLOR: navy;

FONT-FAMILY: sans-serif;

FONT-SIZE: 10pt;

FONT-WEIGHT: bold;

TEXT-ALIGN: center

}

.dates {

COLOR: black;

FONT-FAMILY: sans-serif;

FONT-SIZE: 10pt

}

#submit {

color: #fff;

font-size: 0;

width: 135px;

height: 60px;

border: none;

margin: 0;

padding: 0;

background: #0c0 url(images/send-now.gif) 0 0 no-repeat;

}

</style>

</head>

<br>

<form action="nextPage.jsp" method="post" name="reportForm"

onsubmit="return validateForm()">

<th colspan="3" align="center">Temp Report</th>

</tr>

<tr>

<td>Field 1</td>

</tr>

<tr>

<td>Field 2</td>

</tr>

<tr>

<td>Start Date</td>

<td><INPUT id=MyDate name=MyDate size=15> <a

href="JavaScript:;" onClick="toggleCalendar('MyDate')">Select</a>

<TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3

id=calendar style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4">

<TBODY>

<TR>

<TD colSpan=7 vAlign=center> <SELECT

id=month onchange=newCalendar()>

// Output months into the document.

// Select current month.

for (var intLoop = 0; intLoop < months.length; intLoop++)

document.write("<OPTION " +   (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);

</SCRIPT>

</SELECT>  <SELECT id=year onchange=newCalendar()>

// Output years into the document.

// Select current year.

for (var intLoop = 1900; intLoop < 2028; intLoop++)

document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);

</SCRIPT>

</SELECT></TD>

</TR>

// Output days.

for (var intLoop = 0; intLoop < days.length; intLoop++)

document.write("<TD>" + days[intLoop] + "</TD>");

</SCRIPT>

</TR>

for (var intWeeks = 0; intWeeks < 6; intWeeks++)

{

document.write("<TR>");

for (var intDays = 0; intDays < days.length; intDays++)

document.write("<TD></TD>");

document.write("</TR>");

}

</SCRIPT>

</TBODY>

<TBODY>

<TR>

<TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN

style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD>

</TR>

</TBODY>

</TABLE>

</td>

</tr>

<tr>

<td>Start Time</td>

</tr>

<tr>

<td><INPUT id=MyDate1 name=MyDate1 size=15> <a

href="JavaScript:;" onClick="toggleCalendar('MyDate1')">Select</a></td>

</tr>

<tr>

</select></td>

</tr>

<tr>

Rob Crowther

author

Posts: 297

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You have two line breaks (<br> elements) at the top of the <body>, these will add two lines of space. If you don't want that space, don't put the line breaks in.

Also you have an <img> and a <table> element inside the <head>, since the <head> is for content which isn't displayed it's unlikely to work the way you expect it to, it's also invalid HTML which may force browsers into some sort of quirks mode leading to yet more issues.

Read my books: Hello! HTML5 & CSS3 | HTML5 in Action | Read my blog

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I did like that removed it from head and still getting space at top.

This might be a small issue but I am strugling and have wasted so much time on this. Help on this will be apreciated.

thanks

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Is this an HTML file or a JSP?

And why are you putting all that crap CSS on the image? It's the body I told you to set the margin and padding for.

And why is the style element not in the head?

And why aren't you using the HTML5 doctype?

That's all the questions for now.

[Asking smart questions] [About Bear] [Books by Bear]

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This is a JSP page.index.jsp

If put CSS for Body instead of Image then it will apply for all elements in body.I dont want that.I want it only for image because I dont want other elements style to be effected by this.

I have done the modifications as you suggested except for putting body because I dont want to effect other things in body by this style.
But still the same issue.
thanks

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Monica. Shiralkar wrote:If put CSS for Body instead of Image then it will apply for all elements in body.

You can listen to me or you can ignore me. If you don't listen, you will never solve your problem because the space is caused by the body. Period.

You can put any CSS you want on the image and it will not work.

I hope I have made things clear enough.

[Asking smart questions] [About Bear] [Books by Bear]

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks a ton Bear. That worked perfectly. Its high time I practice css with sample projects.I was confused by the rules of css thinking if I write body there locatin of entire elements in body will get disturbed. Thanks again for your patience.

Monica Shiralkar

Ranch Hand

Posts: 2969

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

It was resolved successfully using the suggestion but the most surprising thing is my image is in header (not body) and removing the margin padding of Body resolves it(when image is in header not body)

Bear Bibeault

Sheriff

Posts: 67756

173

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

It is invalid to put an image tag in the head; and when you have invalid HTML there's no telling what will happen.

Always validate your HTML and fix and invalid constructs.

[Asking smart questions] [About Bear] [Books by Bear]

Did you see how Paul cut 87% off of his electric heat bill with 82 watts of micro heaters?