jQuery in Action, 2nd edition*
The moose likes HTML, CSS and JavaScript and the fly likes HTML page including image at top leaving blank space at top Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "HTML page including image at top leaving blank space at top" Watch "HTML page including image at top leaving blank space at top" New topic
Author

HTML page including image at top leaving blank space at top

Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 594
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

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


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 594
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

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.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 594
Ok.Please tell the name of attribute I have to add as zero padding and zero margin.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

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.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 594
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

Add the following to the head element:
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Images do not have a closing tag, they are self closing.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

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.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 594
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

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.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 594
I did exactly as you said. Still got space at the top.




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








Rob Crowther
author
Ranch Hand

Joined: Nov 06, 2012
Posts: 295
    
    5

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

Joined: Jul 07, 2012
Posts: 594
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

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.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 594
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

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.

Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 594
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

Joined: Jul 07, 2012
Posts: 594
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60822
    
  65

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.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: HTML page including image at top leaving blank space at top
 
Similar Threads
include directive doesn't work
http error404
I got http-500 error in servlet and jsp.how to find error?
Not able to set attribute in JSP
Problem in my JSTL comment